import {Video, View} from "@tarojs/components";
import {FC, useState} from "react";
import Taro from "@tarojs/taro";
import styles from './videoFull.module.scss'

interface Params {
  url: string
  poster?: string
  title?: string
}

const VideoFull: FC = () => {
  const params = Taro.useRouter().params as unknown as Params
  const video = Taro.createVideoContext('myVideo')
  const [palying, setpalying] = useState(false)

  Taro.useLoad(() => {
    console.log(params)
    if (!params.url) {
      Taro.showModal({
        title: '播放地址错',
        success() {
          Taro.navigateBack()
        }
      })
    }
  })

  function click() {
    if (palying) {
      video.pause()
    } else {
      video.play()
    }
  }

  function onError() {
    Taro.showModal({
      title: '视频播放错误',
      confirmText: '退出',
      showCancel: true,
      success() {
        Taro.navigateBack()
      }
    })
  }

  return (
    <>
      {params.title && <View className={styles.title}>{params.title}</View>}
      <Video
        posterSize='100%'
        id={'myVideo'}
        onClick={click}
        className={styles.video}
        controls
        poster={params.poster}
        src={params.url}
        autoplay
        showCenterPlayBtn
        autoPauseIfOpenNative
        autoPauseIfNavigate
        playBtnPosition='center'
        showFullscreenBtn={false}
        enableProgressGesture={false}
        onPlay={() => setpalying(true)}
        onPause={() => setpalying(false)}
        onError={onError}
      />
    </>
  )
}

export default VideoFull