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

function A2main() {
  const SCENE_CODE = 'SG-zeRFYMaTE9F'
  // 漫游的状态
  const { state3d } = useSelector((state: RootState) => state.three)

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

  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 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 className='viewContainer'>
            <div
              id='previous'
              className='previous desktop-only ui-icon'
              style={{ display: 'none' }}
            >
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <img
                  rel='tooltip'
                  src='images/play.png'
                  width='24'
                  height='24'
                  data-original-title='播放'
                  alt=''
                />
              </a>
            </div>

            <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>
          </div>
        </div>
        <div className='pinBottom right hideTarget'>
          <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='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>

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

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

const MemoA2main = React.memo(A2main)

export default MemoA2main