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 = 'SG-NhzxmM4kcLn-05'
  // 漫游的状态
  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 scrollToLeft = () => {
    if (sectionBoxRef.current) {
      sectionBoxRef.current.scrollTo({
        left: 0,
        behavior: 'smooth'
      });
      setIsActive(true)
    }
  };

  // 滚动到最右 
  const scrollToRight = () => {
    if (sectionBoxRef.current) {
      sectionBoxRef.current.scrollTo({
        left: sectionBoxRef.current.scrollWidth,
        behavior: 'smooth'
      });
      setIsActive(false)
    }
  };

  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 , .section6, .section7, .section8, .section9')
    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>
              鸦片战争前后，地处腹地的湖北，鸦片烟毒肆虐泛滥，农民起义风起云涌。第二次鸦片战争后，汉口成为对外通商口岸，西方列强蜂拥而至，对湖北进行经济掠夺和文化渗透。湖北开始从一个内陆封闭省份，沦为半殖民地、半封建的开放区域。湖北社会由此置身于数千年未有之大变局中。
            </p>
          </div>
          <div className='section2 sectionCont'>
            <p>
              鸦片战争前后，湖北社会仍在传统的轨道上运行。1838年，湖广总督林则徐在武汉禁烟，拉开近代中国人民禁烟斗争的序幕。随后钟人杰起义震动鄂南，太平天国运动席卷荆楚。晚清日益激化的民族矛盾、阶级矛盾在湖北反映强烈。</p>
          </div>
          <div className='section3 sectionCont'>
            <p>
              英国通过不平等的《中英天津条约》，使深处内陆的汉口成为对外通商口岸。汉口开埠后，列强纷至沓来，划定租界，派驻领事，控制海关，汉口特别是租界区成为列强进行经济侵略和文化渗透的重要据点。 </p>
          </div>
          <div className='section4 sectionCont'>
            <p>
              汉口开埠后，外国商人利用不平等条约赋予的特权，在湖北先后开办上百家商行、银行和加工、运输企业，获取巨额经济利益。教会势力深入城乡，除传教布道外，通过办学校、建医院、设育婴堂等，扩大影响。列强势力的扩张，对湖北社会、经济、文化等带来重大冲击和影响。
            </p>
          </div>
          <div className='section5 sectionCont'>
            <p>
              光绪年间，张之洞任湖广总督长达18年，任内推行洋务新政，锐意建设改革，使湖北一跃成为洋务运动后期的中心，不仅为湖北近代实业、教育、军政等打下基础，而且对湖北近代社会乃至晚清政局产生重要影响。
            </p>
          </div>
          <div className='section6 sectionCont'>
            <p>
              1889年8月，张之洞由两广总督调补湖广总督12月正式到鄂履职，直至1907年8月奉旨进京。督鄂期间，他致力于办实业、兴学堂、倡游学、练新军等，极大推动了湖北特别是武汉地区的近代化进程。  </p>
          </div>
          <div className='section7 sectionCont'>
            <p>
              张之洞在湖北推行洋务新政，以兴办实业倾注心力最多，初步建成湖北重工业、轻工业体系，奠定了近代民族工业的基础。这一时期，京汉铁路建成通车，粤汉铁路相继动工，湖北铁路交通格局基本形成。城市基础建设加强，民营工业成批涌现，湖北实业兴旺，一时为全国瞩目。 </p>
          </div>
          <div className='section8 sectionCont'>
            <p>
              随着洋务新政的推行，张之洞深感人才的不足一方面对旧式书院进行改革，另一方面设立各级各类新式学堂，在湖北建立起较为完备的近代教育体系。同时延揽名师，大量派遣游学生，为湖北乃至全国造就了大批新式人才。    </p>
          </div>
          <div className='section9 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
