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 http from '@/utils/http'
// import isMobile from '@/utils/isMobile'
const imgArrTemp = ['like.png', 'likeAc.png']
const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))


function A2main() {
  const SCENE_CODE = (window.location.hash).split('m=')[1]
  // 漫游的状态
  const { state3d } = useSelector((state: RootState) => state.three)

  // 点赞
  const [like, setLike] = useState(false)
  const [likeNum, setLikeNum] = useState(1)
  const [viewNum, setViewNum] = useState(1)
  const [isShowSection, setIsShowSection] = useState(false)

  useEffect(() => {
    http.get(`https://count.4dage.com/api/count/detail/${SCENE_CODE}`).then(res => {
      setLikeNum(res.data.starSum!)
    })
    http.get(`https://count.4dage.com/api/count/saveVisit/${SCENE_CODE}`).then(res => {
      setViewNum(res.data.visitSum!)
    })
  }, [])

  // 点击点赞
  const likeFu = useCallback(() => {
    if (like) return
    setLike(true)
    setTimeout(() => {
      http.get(`https://count.4dage.com/api/count/saveStar/${SCENE_CODE}`).then(res => {
        setLikeNum(likeNum + 1)
        setLike(false)
      })
    }, 2000)
  }, [like, likeNum])

  // 点击热点列表
  const [hotListShow, setHotListShow] = useState(false)

  // 点击分享
  const copyWithTextarea = (text: string) => {
    const textArea = document.createElement('textarea')
    textArea.value = text
    textArea.style.position = 'fixed'
    textArea.style.left = '-9999px'
    textArea.style.top = '-9999px'
    document.body.appendChild(textArea)
    textArea.select()
    const copyTXT = document.execCommand('copy')
    document.body.removeChild(textArea)
    return copyTXT
  }
  const handleShareClick = () => {
    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
      navigator.clipboard.writeText(window.location.href)
      message.success('链接已复制到剪贴板')
    } else {
      copyWithTextarea(window.location.href)
      message.success('链接已复制到剪贴板')
    }
  }
  const sectionBoxRef = useRef<HTMLDivElement>(null)
  const [isActive, setIsActive] = useState(true)
  // 滚动到最左


  const hiddenMap = (isShow: boolean) => {
    const cad: any = document.querySelector('.cad')
    if (cad) {
      cad.style.visibility = isShow ? 'hidden' : 'visible'
    }
  }

  useEffect(() => {
    const sections = document.querySelectorAll('.section1, .section2, .section3, .section4, .section5')
    sections.forEach((section, index) => {
      section.setAttribute('data-index', index.toString())
      console.log(section)
    })
  }, [])

  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.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
              className='A2_map_box'
              style={!isMobile() ? { display: 'none' } : {}}
              onClick={() => {
                if (!cad?.style.visibility) {
                  hiddenMap(true)
                }
                const isShow = cad?.style.visibility === 'hidden'
                hiddenMap(!isShow)
              }}
            >
              <img src={require('@/assets/img/map.png')} alt='' />
              <div className='hoveImg'>地图</div>
            </div> */}

            {/* 点赞 */}
            <div className='likeBox' onClick={likeFu}>
              <img src={like ? imgArr[1] : imgArr[0]} alt='' />
              <div className='hoveImg'>点赞{likeNum}</div>
              <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
            </div>

            <div className='A2_share_box' onClick={handleShareClick}>
              <img src={require('@/assets/img/share.png')} alt='' />
              <div className='hoveImg'>分享</div>
            </div>

            <div className='A2_view_box'>
              <img src={require('@/assets/img/view.png')} alt='' />
              <div className='hoveImg'>浏览量{viewNum}</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'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <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' }}>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <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>

      {/* <div
        className='sectionIndex'
        onClick={() => {
          setIsShowSection(true)
          hiddenMap(true)
        }}
      >
        <img className='sectionIndexImg' src={require('../../assets/img/section.png')} alt='' draggable='false' />
      </div> */}

      <div
        className='section'
        style={{
          pointerEvents: isShowSection ? 'auto' : 'none',
          opacity: isShowSection ? '1' : '0'
        }}
      >
        {/* <div className="arrL" style={{ opacity: isActive ? '0.1' : '1', cursor: isActive ? 'not-allowed' : 'pointer' }} onClick={scrollToLeft}><img src={require('../../assets/img/preP.png')} alt="" /></div> */}
        {/* <div className="arrR" style={{ opacity: isActive ? '1' : '0.1', cursor: isActive ? 'pointer' : 'not-allowed' }} onClick={scrollToRight}><img src={require('../../assets/img/nextP.png')} alt="" /></div> */}
        <div className='sectionBox' ref={sectionBoxRef} onClick={() => setIsShowSection(false)}>
          <div className='section1 sectionCont'>
            <p>
              陶器是人类文明的见证物，历史悠久，内涵丰富。在漫长的历史长河中，陶器生产延绵不绝，窑火生生不息。本馆馆藏陶器自新石器时期起，历经商周、秦汉、六朝、唐宋而至明清时期均有收藏。本次展览在展示陶器的历史性和功能性之外，更着重从艺术审美的角度呈现陶器多样的造型、丰富的色彩、精美的纹饰、精巧的工艺，令观众从千姿百态的陶器中领略其古朴风韵。<br />
              瓷器(china)是中国的象征，它作为中华文明的代表性元素而闻名于世，是人类文明史上的一颗璀璨明珠。湖北虽无名窑名瓷，但本土江夏湖泗窑和汉川马口窑等民窑独具地方特色。正因湖北地区名窑少，且处于南北交汇、东通西联的优越地理位置，国内各地窑口的瓷器在湖北均有出土和流传，越窑、定窑、龙泉窑、岳州窑、长沙窑、洪州窑、建窑、耀州窑、吉州窑、景德镇窑、德化窑等产品比比皆是。展览中三国青釉人顶灯、南朝青釉莲花尊、元青花四爱图梅瓶和龙纹梅瓶、明德化窑白釉观音像等文物均为难得一见的珍品
              陶风瓷韵，吉光与华彩，拙雅与华美，相得益彰，相映成辉。
            </p>
          </div>
          <div className='section2 sectionCont'>
            <p>
              湖北新石器时代遗址出土陶器的器类和内涵丰富，是研究长江中游史前文化发展脉络的重要材料。盘龙城、叶家山等考古遗址中出土了商代、西周时期的陶器。春秋战国时期陶器以灰陶为主，尤以仿铜陶礼器为代表。汉代出现了低温铅釉陶等品类，髹漆陶器更是别具一格。武昌隋唐墓出土了数量庞大的陶俑、陶塑动物、模型明器等。宋元明清时期陶器生产式微，多以瓷器替代。明清以来，汉川马口窑、麻城蔡家山窑、蕲春管窑以朴实厚重的器型及刻划花工艺为特色，乡土生活气息浓厚。</p>
          </div>
          <div className='section3 sectionCont'>
            <p>
              湖北地处长江中游，交通便利，历史上各地窑口的瓷器多有发现。湖北出土了商周时期的原始瓷和汉代的成熟青瓷，其产地应为长江中下游地区。魏晋南北朝时期青瓷一统天下，湖北出土大量青瓷，以鄂州最多。隋唐时期瓷业形成“南青北白”格局，武昌隋唐墓出土瓷器以青瓷为主，兼有长沙窑彩瓷。宋代是瓷业发展史上的繁荣时期，湖泗窑是湖北历史上首次科学发掘的民间瓷窑址群，主要出土青白瓷。<br />
              元代青花瓷的出现改变了瓷器以单色釉为主的局面，彩瓷日渐盛行。馆藏元明时期瓷器以明代藩王墓出土的青花、彩瓷、单色釉瓷为主，以元青花四爱图梅瓶为代表。清代制瓷业达到新高峰，馆藏故宫拨交的清代官窑瓷器脉络清晰，种类齐全。 </p>
          </div>
          <div className='section4 sectionCont'>
            <p>
              陶之古朴典雅、瓷之华美风韵，相映成趣。中国古代先民不断探索陶瓷制造技艺和审美追求，融合外来文化因素，成就了璀璨的陶瓷文化。水、火、土淬炼而成的陶瓷是人类社会进程中的伟大成就。湖北省博物馆的陶瓷收藏脉络清晰，特色鲜明，是荆楚文化的重要组成部分。
            </p>
          </div>
          <div className='section5 sectionCont'>
            <p>
              陶之古朴典雅、瓷之华美风韵，相映成趣。中国古代先民不断探索陶瓷制造技艺和审美追求，融合外来文化因素，成就了璀璨的陶瓷文化。水、火、土淬炼而成的陶瓷是人类社会进程中的伟大成就。湖北省博物馆的陶瓷收藏脉络清晰，特色鲜明，是荆楚文化的重要组成部分。
            </p>
          </div>
        </div>
        <div
          className='sectionClose'
          onClick={() => {
            setIsShowSection(false)
            setIsActive(true)
            hiddenMap(false)
          }}
        >
          <img src={require('../../assets/img/close.png')} alt='' />
        </div>
      </div>

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

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

const MemoA2main = React.memo(A2main)

export default MemoA2main
