import React, { useCallback } 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'
function A2main() {
  // 点击热点列表
  const clickHotIconFu = useCallback(() => {
    alert('点击热点列表')
  }, [])

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

      <A22hotListWrap />

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

      {/* 主要修改的图标部分 */}
      <div className='pinBottom-container'>
        <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='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <img src='images/play.png' width='24' height='24' alt='' />
              </a>
            </div>
            <div id='pause' className='ui-icon' style={{ display: 'none' }}>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <img
                  rel='tooltip'
                  title='暂停'
                  src='images/pause.png'
                  width='24'
                  height='24'
                  alt=''
                />
              </a>
            </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 id='gui-modes-map' className='ui-icon double active'>
              <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
                <img className='icon icon-inside' src='images/auto.png' title='导览' alt='' />
              </div>

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

              {/* 新的热点列表 */}
              <div className='A2hotIcon' rel='tooltip' onClick={clickHotIconFu}>
                <img src='images/hotlist.png' title='热点列表' alt='' />
              </div>

              <div
                data-original-title='全景漫游'
                id='gui-modes-inside'
                rel='tooltip'
                title=''
                className=''
              >
                <img className='icon icon-inside' src='images/inside.png' title='全景漫游' alt='' />
              </div>
              <div
                data-original-title='迷你模型'
                id='gui-modes-dollhouse'
                rel='tooltip'
                title=''
                className=''
              >
                <img
                  className='icon icon-inside'
                  src='images/dollhouse.png'
                  title='迷你模型'
                  alt=''
                />
              </div>
              <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip' title=''>
                <img className='icon icon-inside' src='images/floor.png' title='俯视图' alt='' />
              </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' width='24' height='24' alt='' />
              </a>
            </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'
              title='{[{ VIEW_FULLSCREEN }]}'
            >
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i className='icon icon-fullscreen'></i>
              </a>
            </div>
            <div
              id='gui-fullscreen-exit'
              className='ui-icon wide'
              data-placement='top'
              rel='tooltip'
              title='{[{ EXIT_FULLSCREEN }]}'
              style={{ display: 'none' }}
            >
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i className='icon icon-fullscreen-exit'></i>
              </a>
            </div>
            <div className='pull-right terms terms2'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>{'{[{ TERMS }]}'}</a>
            </div>
          </div>
        </div>
      </div>

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

const MemoA2main = React.memo(A2main)

export default MemoA2main
