import Taro, { useLoad, useReady, useUnload, useScope } from '@tarojs/taro'
import { PropsWithChildren, useState } from 'react'
import { View, Video, Navigator, Image } from '@tarojs/components'
import useGetCustomClient from '@/hooks/useGetCustomClient'
import { wrapProps } from '@/plugin/share'
import './index.less'

// const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/customPage/index'
const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1708595757_1708595757542.mp4'
const VIDEO_COVER = 'http://rescdn.yishihui.com/ad/prod/video/material_AD_1702267670_1702267670233.mp4?x-oss-process=video/snapshot,t_5000,f_jpg,w_0,h_0,m_fast'

// 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
let loadedMetaFiredInOnce = 0


function PqCustom(props: PropsWithChildren<CustomPropsType>) {
  let {
    adpId,
    autoplay,
    loop,
    muted,
    showMusk,
    zIndex,
    openEmbeddedMiniProgram,
    onPlay,
    onPause,
    onEnded,
    onTimeUpdate,
    onStop,
    onError,
    onLoad,
    onView,
    onClick,
    onClose
  } = wrapProps(props)
  const [show, setShow] = useState(true)

  function videoPlay() {
    onPlay()
  }

  function videoPause() {
    onPause()
  }

  function videoPlayEnded() {
    onEnded()
  }

  function videoTimeUpdate() {
    onTimeUpdate()
  }

  function videoStop() {
    onStop()
  }

  function videoClick() {
    closeCustom()
  }

  function closeCustom() {
    onClose()
    setShow(false)
  }

  function clickMask() {
    onClick()
    closeCustom()
  }

  return (
    <>
      {show && <View className='pq-custom' onClick={clickMask}>
        <View className='custom-container'>
          <View className='icon' style={{zIndex: (zIndex || 1) + 1}}>
            广告
          </View>
          <View className='close-icon'style={{zIndex: (zIndex || 1) + 1}} onClick={closeCustom}>
          </View>

          {/* <Navigator url={WEB_VIEW_URL}> */}
            <Custom
              autoplay={autoplay}
              loop={loop}
              muted={muted}
              src={VIDEO_SRC}
              poster={VIDEO_COVER}
              onPlay={videoPlay}
              onTimeUpdate={videoTimeUpdate}
              onPause={videoPause}
              onEnded={videoPlayEnded}
              onStop={videoStop}

              onClick={videoClick}
              onLoad={onLoad}
              onView={onView}
              onError={onError}
            />
          {/* </Navigator> */}
        </View>
      </View>}
    </>
  )
}

function Custom({
  autoplay, loop, muted, src, poster,
  onPlay, onPause, onEnded, onTimeUpdate, onStop, // 播放事件
  onClick, onLoad, onView, onError
}) {
  const [style, setStyle] = useState({ width: '0px', height: 'px' })

  useReady(() => {
    loadedMetaFiredInOnce = 0
  })

  useGetCustomClient((customClient) => {
    let clientWidth = customClient.width
    let clientHeight = customClient.height

    setStyle({
      width: `${clientWidth}px`,
      height: `${clientHeight}px`
    })
  })

  function onLoadedMetaData() {
    if (loadedMetaFiredInOnce++ < 1) {
      // 上报load
      onLoad()
    }
  }

  return (
    <View className='custom' style={style}>
      <Video
        id='pq-custom'
        className='custom-video'
        objectFit='fill'
        controls={false}
        // video属性
        autoplay={autoplay}
        loop={loop}
        muted={muted}
        src={src}
        poster={poster}
        // video事件
        onPlay={onPlay}
        onTimeUpdate={onTimeUpdate}
        onPause={onPause}
        onEnded={onEnded}
        onStop={onStop}
        onError={onError}

        // video交互
        onClick={onClick}
        onLoadedMetaData={onLoadedMetaData}
      />
      <View className='custom-bottom'>
        <Image src='http://rescdn.yishihui.com/ad/prod/image/logo_AD_1702267670_1702267670233.png' className='logo' />
        <View className='title'>5天站桩入门课</View>
        <View className='button'>免费领取</View>
      </View>
    </View>
  )
}

export default PqCustom
