import React, { useEffect, useRef } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import BtnRight from '../BtnRight'

type Props = {
  isShow: boolean
  src: string
  closeFu: () => void
  controls?: boolean
}

function VideoModel({ isShow, src, closeFu, controls = false }: Props) {
  const videoRef = useRef<HTMLVideoElement>(null)

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

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

      {/* 右下角的返回按钮 */}
      <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
    </div>
  )
}

const MemoVideoModel = React.memo(VideoModel)

export default MemoVideoModel
