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 //没有跳过按钮
  openYin?: boolean //打开声音播放
  // 不用删除自己
  noDel?: boolean
}

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

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

  const playEndFu = useCallback(() => {
    parentFu()

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

  return (
    <div id='CatVideo' className={classNames(styles.CatVideo, isShow ? '' : styles.CatVideoHide)}>
      <video
        ref={videoRef}
        playsInline
        muted={!openYin}
        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>

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

const MemoCatVideo = React.memo(CatVideo)

export default MemoCatVideo
