import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { domDelOwnFu } from '@/utils/utilsSome'
import BtnRight from '../BtnRight'

type Props = {
  isShow: boolean
  src: string
  parentFu: () => void
  noBtn?: boolean //没有跳过按钮
}

function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (isShow) {
      setTimeout(() => {
        if (videoRef.current) videoRef.current.play()
      }, 100)
    }
  }, [isShow])

  const playEndFu = useCallback(() => {
    parentFu()
    // 0.5s之后删除过度视频
    setTimeout(() => {
      domDelOwnFu('#CatVideo')
    }, 500)
  }, [parentFu])

  return (
    <div id='CatVideo' className={classNames(styles.CatVideo, isShow ? '' : styles.CatVideoHide)}>
      <video
        ref={videoRef}
        playsInline
        muted
        webkit-playsinline='true'
        x5-video-player-type='h5'
        onEnded={playEndFu}
      >
        <source type='video/mp4' src={src} />
        Your browser does not support the video tag.
      </video>

      {/* 右下角的跳过按钮 */}
      {noBtn ? null : <BtnRight imgName='skip' clickSon={() => playEndFu()} title='跳过' />}
    </div>
  )
}

const MemoCatVideo = React.memo(CatVideo)

export default MemoCatVideo