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

import classNames from 'classnames'

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 } from './Bottom/data'
import { isMobileFu } from '@/utils/history'

import xiaImg from '@/assets/img/jiantou_w.png'

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

  const clickBtn = useCallback((val: '首页' | '室内' | '室外') => {
    setPageKey(val)
    setAudioSta(true)
  }, [])

  // 首页/室内/室外
  const [pageKey, setPageKey] = useState<'首页' | '室内' | '室外'>('首页')

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

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

  // 分享、介绍
  const [sonPageShow, setSonPageShow] = useState<'分享' | '介绍' | ''>('')

  // 选中的对象数据

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

  useEffect(() => {
    if (acObj.type && acObj.type !== 'kk') {
      // 加载全景
      embedpano({
        // 地址待完善
        swf: `//www.4dkankan.com/panorama/showviewer/lib/krpano/tour.swf`,
        xml: `//4dkk.4dage.com/720yun_fd_manage/${WKID}/tour.xml`,
        target: 'panoBox',
        html5: 'auto',
        mobilescale: 1.0,
        passQueryParameters: true
      })
    }
  }, [acObj.type])

  useEffect(() => {
    // 切换全景
    const code = acObj.sceneCode
    const krpano: any = document.getElementById('krpanoSWFObject')
    if (krpano && code) {
      krpano.call(`loadscene(scene_${code}, null,null, BLEND(1.0, easeInCubic) )`)
    }
  }, [acObj.sceneCode])

  // 手机端icon的显示和隐藏
  const [iconShow, setIconShow] = useState(false)

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

          <div className='b1Btn'>
            <img className='b1img' src={top4Img} alt='' />
            <ul>
              {/* 待完善 */}
              <li onClick={() => clickBtn('室内')} style={{ opacity: 0, pointerEvents: 'none' }}>
                展馆漫游
              </li>
              <li onClick={() => clickBtn('室外')}>展区漫游</li>
            </ul>
          </div>
        </div>
      ) : null}

      {/* 右侧按钮 */}
      <div className={classNames('v_aside', iconShow ? 'v_asideShow' : '')}>
        {isMobileFu() ? (
          <div className='mTopIcon' onClick={() => setIconShow(!iconShow)}>
            <img src={xiaImg} alt='' />
          </div>
        ) : null}

        <ul>
          {/* 待完善 */}
          <li onClick={() => setSonPageShow('介绍')} 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={() => setSonPageShow('分享')}>
            <i className='iconfont icon-fenxiang'></i>
          </li>
        </ul>
      </div>
      {/* 分享页面 */}
      <Share isShowType={sonPageShow} closeFu={() => setSonPageShow('')} />
      {/* 底部页面 */}
      <Bottom setTopObj={val => setAcObj(val)} pageKey={pageKey} />
      {/* 顶部title */}
      {acObj.sceneCode ? (
        <>
          <div className='A1title'>{acObj.sceneTitle}</div>

          <div className='iframeBox'>
            {/* 四维看看 地址待完善*/}
            {acObj.type === 'kk' ? (
              <iframe
                key={acObj.sceneCode}
                src={`https://www.4dkankan.com/spg.html?m=${acObj.sceneCode}&hideNav`}
                frameBorder='0'
                title='qj'
              ></iframe>
            ) : (
              // 加载全景
              <div id='panoBox'></div>
            )}
          </div>
        </>
      ) : null}
      {/* 嵌套页面 */}
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home