import React, { useCallback, useEffect, useState, useRef } from 'react'
import styles from './index.module.scss'
import A21vrOff from './components/A21vrOff'
import A22hotListWrap from './components/A22hotListWrap'
import A23pinTop from './components/A23pinTop'
import A24drawerList from './components/A24drawerList'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import classNames from 'classnames'
import A3hotList from '../A3hotList'
import { message } from 'antd'
// import isMobile from '@/utils/isMobile'
const imgArrTemp = ['like.png', 'likeAc.png']
const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))

declare global {
  interface Window {
    backczbClick: (state: boolean) => void;
  }
}
function A2main() {
  // 漫游的状态
  const { state3d } = useSelector((state: RootState) => state.three)
  const [isIntroShow, setIsIntroShow] = useState(false)
  const [hotListShow, setHotListShow] = useState(false)
  const hiddenMap = (isShow: boolean) => {
    const cad: any = document.querySelector('.cad')
    if (cad) {
      cad.style.visibility = isShow ? 'hidden' : 'visible'
    }
  }

  return (
    <div className={styles.A2main} id='gui' style={{ display: 'none' }}>
      <A21vrOff />

      <A22hotListWrap />

      {/* 顶部介绍 */}
      <A23pinTop />

      {/* 主要修改的图标部分 */}
      <div className={classNames('pinBottom-container', state3d === 'panorama' ? '' : 'pinBottom-containerNo')}>
        <div className='pinBottom center'>
          <div id='view-controllers'></div>
        </div>

        <div className='pinBottom left'>
          <div id='gui-modes-map' className='ui-icon double active'>
            <div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a style={{ width: '100%', height: '100%' }}>
                <img src='images/play.png' alt='' />
              </a>
              {/* 鼠标移入 */}
              <div className='hoveImg'>开始漫游</div>
            </div>
            <div id='pause' className='ui-icon' rel='tooltip' style={{ display: 'none' }}>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a style={{ width: '100%', height: '100%' }}>
                <img rel='tooltip' src='images/pause.png' alt='' />
              </a>
              {/* 鼠标移入 */}
              <div className='hoveImg'>暂停漫游</div>
            </div>
            <div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i rel='tooltip' title='' className='icon icon-dpad-right' data-original-title='下一个'></i>
              </a>
            </div>
            <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
              <img className='icon icon-inside' src='images/auto.png' alt='' />
              {/* 鼠标移入 */}
              <div className='hoveImg'>导览列表</div>
            </div>

            {/* 原始热点列表---隐藏 */}
            <div data-original-title='热点列表' id='hotList' rel='tooltip' style={{ display: 'none' }}>
              <img className='icon icon-inside' src='images/hotlist.png' title='热点列表' alt='' />
            </div>

            {/* 新的热点列表 */}
            {/* <div
              className='A2hotIcon'
              rel='tooltip'
              onClick={() => {
                // 停止自动导览
                window.player.director.stopTour()
                setHotListShow(true)
                hiddenMap(true)
              }}
            >
              <img src={`images/hotlist${hotListShow ? '_active' : ''}.png`} alt='' />
              <div className='hoveImg'>热点列表</div>
            </div> */}

            <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
              <img className='icon icon-inside' src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`} alt='' />
              {/* 鼠标移入 */}
              <div className='hoveImg'>全景漫游</div>
            </div>
            <div data-original-title='迷你模型' id='gui-modes-dollhouse' rel='tooltip'>
              <img className='icon icon-inside' src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`} alt='' />
              {/* 鼠标移入 */}
              <div className='hoveImg'>迷你模型</div>
            </div>
            <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
              <img className='icon icon-inside' src={`images/floor${state3d === 'floorplan' ? '_active' : ''}.png`} alt='' />
              {/* 鼠标移入 */}
              <div className='hoveImg'>顶部视图</div>
            </div>
            {/* <div
                data-original-title='VR'
                id='vr'
                rel='tooltip'
                title=''
                style={{ display: 'none' }}
              >
                <img className='icon icon-inside' src='images/VR.png' title='VR' alt='' />
              </div> */}
            {/* <div
                data-original-title='消除外壳'
                id='gui-remove-face'
                rel='tooltip'
                title=''
                style={{ display: 'none', float: 'left' }}
              >
                <img className='icon icon-inside' src='images/face.jpg' alt='' />
              </div> */}
          </div>

          {/* <img className='splitImg' src={require('../../assets/img/splitImg.png')} alt='' draggable='false' /> */}
          <div className='rightViewContainer clearfix'>
            <div className='gui-floor'>
              <div className='gui-floor-title'></div>
              <div className='gui-floor-icon'>
                <span className='gui-floor-number'></span>
              </div>
              <div className='container'></div>
            </div>
            <div id='volume' className='ui-icon wide'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <img src='images/Volume btn_on.png' alt='' />
              </a>
              <div className='hoveImg'>音乐开关</div>
            </div>

            <div id='vr' className='ui-icon wide hidden' style={{ display: 'none' }}>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i rel='tooltip' title='{[{ VIEW_IN_VR }]}' className='icon icon-webvr'></i>
              </a>
            </div>
            <div id='sharing' className='ui-icon wide hidden' style={{ display: 'none' }}>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i rel='tooltip' title='{[{ SOCIAL_SHARING }]}' className='icon icon-share'></i>
              </a>
            </div>
            {/* <div id='gui-fullscreen' className='ui-icon wide' data-placement='top' rel='tooltip'>
              <a>
                <img src='images/full.png' alt='' />
              </a>
              <div className='hoveImg'>全屏</div>
            </div>
            <div id='gui-fullscreen-exit' className='ui-icon wide' data-placement='top' rel='tooltip' style={{ display: 'none' }}>
              <a>
                <img src='images/fullx.png' alt='' />
              </a>
              <div className='hoveImg'>关闭全屏</div>
            </div> */}

            <div className='pull-right terms terms2'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>{'{[{ TERMS }]}'}</a>
            </div>
          </div>
        </div>
      </div>

      {/* 底部导览列表 */}
      <A24drawerList />

      {/* 热点列表 */}
      <A3hotList
        show={hotListShow}
        setShow={setHotListShow}
        closeFu={() => {
          setHotListShow(false)
          hiddenMap(false)
        }}
      />

      <div className="chengzhebei" onClick={() => {
        setIsIntroShow(true)
        if (window.parent !== window) {
          window.parent.backczbClick(true);
        }
      }}>
        <img className='c1' src={require('@/assets/img/chengzhebei1.png')} alt="" />
        <img className='c2' src={require('@/assets/img/chengzhebei2.png')} alt="" />
      </div>

      {isIntroShow && (
        <div className="chengzhebeiD">
          <div className="titleLogo">
            程哲碑
          </div>
          <div className="modalC">
            <iframe title='czbMODEL' src="https://4dscene.4dage.com/culturalrelics/demo2/Model2.html?m=chengzhebei" />
          </div>
          <div className="IntroD">
            <div className="IntroClose" onClick={() => {
              setIsIntroShow(false)
              if (window.parent !== window) {
                window.parent.backczbClick(false);
              }
            }}><img src={require('@/assets/img/closeWithTxt.png')} alt="" draggable="false" /></div>


            <div className="infoD" >

              <div className="contentD" >据当地村民介绍，程哲碑在迁往太原之前一直保存于古佛堂檐下。</div>
            </div>

          </div>
        </div>)}
    </div>
  )
}

const MemoA2main = React.memo(A2main)

export default MemoA2main
