import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'

import classNames from 'classnames'
import { isMobileFu } from '@/utils/history'

import '@/assets/styles/iconfont/iconfont.css'

import logoImg from '@/assets/img/logo.png'
import top4Img from '@/assets/img/top4.png'
import bgmMp3 from '@/assets/img/bgm.mp3'
import Share from './Share'
import Bottom from './Bottom'
import { MyObjRowType, WKID } from './Bottom/data'

function A1home() {
  const audioRef = useRef<HTMLAudioElement>(null)

  const clickBtn = useCallback(() => {
    setBaseShow(false)
    setAudioSta(true)
  }, [])

  // 首页的显示和隐藏
  const [baseShow, setBaseShow] = useState(true)

  useEffect(() => {
    if (window.location.href.includes('?type=kj')) {
      setBaseShow(false)
    }
  }, [])

  // 音乐的播放和暂停
  const [audioSta, setAudioSta] = useState(false)
  useEffect(() => {
    if (audioRef.current) audioSta ? audioRef.current.play() : audioRef.current.pause()
  }, [audioSta])

  // 分享页面
  const [share, setShare] = useState(false)

  // 选中的对象数据

  const [acObj, setAcObj] = useState({} as MyObjRowType)

  useEffect(() => {
    console.log('acObj:', acObj)
  }, [acObj])

  return (
    <div className={styles.A1home}>
      <audio ref={audioRef} src={bgmMp3} loop />
      {/* 初始页面 */}
      <div className='box1' hidden={!baseShow}>
        <img className='b1logo' src={logoImg} alt='' />

        <div className='b1Btn'>
          <img className='b1img' src={top4Img} alt='' />
          <ul>
            {/* 待完善 */}
            <li style={{ opacity: 0, pointerEvents: 'none' }}>展馆漫游</li>
            <li onClick={clickBtn}>展区漫游</li>
          </ul>
        </div>
      </div>
      {/* 右侧按钮 */}
      <div className='v_aside'>
        <ul>
          {/* 待完善 */}
          <li hidden>
            <i className='iconfont icon-jianjie'></i>
          </li>
          <li onClick={() => setAudioSta(!audioSta)}>
            <i
              className={classNames('iconfont', audioSta ? 'icon-yinlekai' : 'icon-yinleguan')}
            ></i>
          </li>
          <li onClick={() => setShare(true)}>
            <i className='iconfont icon-fenxiang'></i>
          </li>
        </ul>
      </div>
      {/* 分享页面 */}
      <Share isShow={share} closeFu={() => setShare(false)} />
      {/* 底部页面 */}
      <Bottom setTopObj={val => setAcObj(val)} isPageShow={baseShow} />
      {/* 顶部title */}
      {acObj.sceneCode ? (
        <>
          {/* <div className='A1title'>{acObj.sceneTitle}</div> */}

          <div className='iframeBox'>
            {/* 地址待完善 */}
            <iframe
              key={acObj.sceneCode}
              src={
                acObj.type === 'kk'
                  ? `https://www.4dkankan.com/spg.html?m=${acObj.sceneCode}&hideNav`
                  : `https://www.4dkankan.com/panorama/${
                      isMobileFu() ? 'airShowMobile' : 'airShow'
                    }.html?id=${WKID}&vr=${acObj.sceneCode}`
              }
              frameBorder='0'
              title='qj'
            ></iframe>
          </div>
        </>
      ) : null}
      {/* 嵌套页面 */}
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
