import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import history from '@/utils/history'
import classNames from 'classnames'
import BaseImg from '@/components/BaseImg'
import S1manor from './S1manor'
import S2mien from './S2mien'
import S3goods from './S3goods'

const videoObj = {
  探索庄园: {
    汉代风华: 'more/1.mp4',
    文物欣赏: 'more/2.mp4'
  },
  汉代风华: {
    探索庄园: 'more/3.mp4',
    文物欣赏: 'more/4.mp4'
  },
  文物欣赏: {
    探索庄园: 'more/5.mp4',
    汉代风华: 'more/6.mp4'
  }
}

type TxtType = '探索庄园' | '汉代风华' | '文物欣赏'

const floorArr: TxtType[] = ['探索庄园', '汉代风华', '文物欣赏']

function B1more() {
  const [floorTxt, setFloorTxt] = useState<TxtType>('探索庄园')
  const floorRef = useRef<TxtType>('探索庄园')

  // 需要播放的视频路径
  const [videoSrc, setVideoSrc] = useState('')

  useEffect(() => {
    if (videoSrc) {
      setTimeout(() => {
        const domAll: any = document.querySelectorAll('.A6videoBox video')
        if (domAll && domAll.length) {
          domAll.forEach((v: HTMLVideoElement) => {
            if (baseURL + videoSrc === v.src) v.play()
            else {
              v.pause()
              v.currentTime = 0
            }
          })
        }
      }, 100)
    }
  }, [videoSrc])

  useEffect(() => {
    const tempObj = Reflect.get(videoObj, floorRef.current)

    const temp = Reflect.get(tempObj, floorTxt)

    floorRef.current = floorTxt

    setVideoSrc(temp)
  }, [floorTxt])

  // 初始加载中动画
  const [isLoding, setIsLoding] = useState(true)

  return (
    <div className={styles.B1more}>
      {/* 三个主要页面 */}
      {/* <S1manor hidden={!!videoSrc || floorTxt !== '探索庄园'} isLoding={isLoding} />
      <S2mien hidden={!!videoSrc || floorTxt !== '汉代风华'} />
      <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} /> */}

      {/* 待完善 */}
      {/* <S1manor hidden={false} isLoding={isLoding} /> */}
      <S2mien hidden={false} />

      {/* 初始静态图 */}
      <BaseImg isShow={!isLoding} iconSrc={``} parentFu={() => setIsLoding(false)} moreSta={true} />

      {/* 6个视频  待完善 调试的时候不显示 */}
      {/* {myData.more.videos.map((src, index) => (
        <div
          className={classNames('A6videoBox', videoSrc === src ? 'A6videoBoxShow' : '')}
          key={index}
        >
          <video
            playsInline
            muted
            webkit-playsinline='true'
            x5-video-player-type='h5'
            onEnded={() => setVideoSrc('')}
            src={baseURL + src}
          >
            <source type='video/mp4' src={baseURL + src} />
            Your browser does not support the video tag.
          </video>
        </div>
      ))} */}

      {/* 底部三个按钮 */}
      <div className='A6floorBox' style={{ opacity: isLoding ? 0 : 1 }}>
        {floorArr.map(v => (
          <div
            onClick={() => setFloorTxt(v)}
            className={classNames(v === floorTxt ? 'A6FrowAc' : '')}
            key={v}
          >
            {v}
          </div>
        ))}
      </div>

      {/* 右下角的图标 */}
      <div
        hidden={floorTxt !== '探索庄园'}
        className='A6rBtn'
        style={{ opacity: isLoding ? 0 : 1 }}
      >
        <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
        <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
      </div>
    </div>
  )
}

const MemoB1more = React.memo(B1more)

export default MemoB1more