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

type Props = {
  lastVideo: boolean //是否显示
  src: string //视频路径
  path: string //点击跳过 或者视频播完 跳路由的路径
  delDom?: string //有的话 就删除这个dom
  noBtn?: boolean //没有跳过按钮
}

// 页面结尾的视频
function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
  const videoRefLast = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (lastVideo) {
      setTimeout(() => {
        if (videoRefLast.current) {
          videoRefLast.current.play()
        }
      }, 100)

      // 0.5s之后删除上级元素
      if (delDom) {
        setTimeout(() => {
          domDelOwnFu(delDom)
        }, 500)
      }
    }
  }, [delDom, lastVideo])

  return (
    <div className={classNames(styles.EndVideo, lastVideo ? styles.EndVideoAc : '')}>
      <video
        ref={videoRefLast}
        playsInline
        muted
        webkit-playsinline='true'
        x5-video-player-type='h5'
        onEnded={() => history.push(path)}
      >
        <source type='video/mp4' src={src} />
        Your browser does not support the video tag.
      </video>

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

const MemoEndVideo = React.memo(EndVideo)

export default MemoEndVideo
