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 toHomeImg from '@/assets/img/toHome.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 history, { isMobileFu, urlParameter } from '@/utils/history'

import xiaImg from '@/assets/img/jiantou_w.png'
import { kankanUrl, panoBaseUrl } from '@/utils/urlRes'

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

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

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

  useEffect(() => {
    const urlObj = urlParameter(window.location.href)
    if (urlObj.type) {
      if (KKlist1Temp2.find((v: any) => v.id === urlObj.type)) setPageKey('室内')
      else setPageKey('室外')
      // if (KKlist1Temp.find((v: any) => v.id === urlObj.type)) setPageKey('室外')
    }
  }, [])

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

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

  const setAcObjFu = useCallback((info: MyObjRowType) => {
    setAcObj(info)
  }, [])

  // 选中的对象数据
  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: panoBaseUrl,
        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('室内')}>展馆漫游</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>
          <li
            onClick={() => {
              history.replace('/')
              setAcObj({} as MyObjRowType)
              clickBtn('首页')
              // setTimeout(() => {
              //   clickBtn(pageKey === '室内' ? '室外' : '室内')
              // }, 200)
              // window.location.href = 'https://airshow.4dkankan.com/index.html'
              // setTimeout(() => {
              //   window.location.reload()
              // }, 200)
            }}
          >
            <div className='toHome'>
              <img src={toHomeImg} alt='' />
            </div>
          </li>
        </ul>
      </div>
      {/* 分享页面 */}
      <Share isShowType={sonPageShow} closeFu={() => setSonPageShow('')} />
      {/* 底部页面 */}
      {pageKey !== '首页' ? <Bottom setTopObj={setAcObjFu} pageKey={pageKey} /> : null}

      {/* 顶部title */}
      {acObj.sceneCode ? (
        <>
          <div className='A1title'>
            {acObj.sceneTitle}({pageKey === '室内' ? '展馆' : '展区'})
          </div>

          <div className='iframeBox'>
            {/* 四维看看*/}
            {acObj.type === 'kk' ? (
              <iframe
                key={acObj.sceneCode}
                src={kankanUrl(acObj.sceneCode)}
                frameBorder='0'
                title='qj'
              ></iframe>
            ) : (
              // 加载全景
              <div id='panoBox'></div>
            )}
          </div>
        </>
      ) : null}
      {/* 嵌套页面 */}
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
