import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import A2main from '../A2main'
const scriptArr = [
  './js/manage.js',
  './js/Hot.js?m=1',
  './js/main_2020_show.js',
  './CAD/bundle.js',
  './showa/js/loadCAD.js'
]

function A1home() {
  // 动态加载 js
  const [lodingJs, setLodingJs] = useState(0)
  useEffect(() => {
    if (lodingJs < scriptArr.length) {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = scriptArr[lodingJs]
      document.head.appendChild(script)
      script.onload = () => {
        setLodingJs(lodingJs + 1)
      }
    }
  }, [lodingJs])

  return (
    <div className={styles.A1home}>
      <div id='hot'> </div>
      <div className='widgets-doll-labels'> </div>
      <div id='popup'>
        <div className='popup-wrap'>
          <div className='popup-content'></div>
          <div id='closepop'>close</div>
        </div>
      </div>

      <div className='sidecontent' style={{ width: '35%' }}>
        <h1>
          <span className='side-client-close'>关闭</span>
        </h1>
        <img src='' alt='' id='sideimg' style={{ width: '90%' }} />
        <br />
        <p id='text'></p>
      </div>

      <div id='gui-thumb' style={{ display: 'none' }}></div>
      <div id='player' style={{ display: 'none' }}></div>

      <div id='gui-parent'>
        <div id='memory-info'>
          GPU memory used: <span id='memory-gpu'></span>
        </div>

        <div id='gui-loading' className='message-outer darkGlass' style={{ display: 'none' }}>
          <h2 className='model-title'> </h2>
          <div className='message-inner'>
            <div className='loadingLogo'>
              <div className='img'></div>
            </div>

            <div className='progressbar' data-perc='100'>
              <div className='label'>
                <div className='perc'>0%</div>
              </div>
              <div className='bar'>
                <span></span>
              </div>
            </div>

            <div id='loaderCoBrand'>
              <div className='vert-align'></div>
            </div>
            <div className='bottom-logo'>
              <div className='img'></div>
            </div>
            <div className='specialPower'>
              <span className='powered-by'>{'{[{ POWERED_BY }]}'}</span>
              &#xA0;<div className='img'></div>
            </div>
          </div>
        </div>

        {/* 主要内容 */}
        <A2main />

        <div className='webvr-popup' style={{ display: 'none' }}>
          <div className='messaging'>
            <div className='page p1'>
              <div className='title'>{'{[{ WEBVR_FOR_DAYDREAM }]}'}</div>
              <img className='image device-headset-side' alt='' />
              <div className='enter-button'>{'{[{ WEBVR_ENTER_WEBVR }]}'}</div>
              <span className='hrule'></span>
              <div className='alt-help'>
                <span className='open-with-app'>{'{[{ VR_APP_OPEN }]}'}</span>
              </div>
            </div>
            <div className='page p2 hidden'>
              <div className='title'>{'{[{ VR_WHAT_YOU_NEED }]}'}</div>
              <ul className='tabs'>
                <li className='tabbutton' id='tabcardboard'>
                  {'{[{ VR_GOOGLE_CARDBOARD }]}'}
                </li>
                <li className='tabbutton' id='tabdaydream'>
                  {'{[{ VR_GOOGLE_DAYDREAM }]}'}
                </li>
                <li className='tabbutton' id='tabnative'>
                  {'{[{ VR_APP }]}'}
                </li>
              </ul>
              <div className='tab-content webvr'>
                <img className='image device-headset' alt='' />
                <span className='detail headset'>
                  <u>{'{[{ VR_GOOGLE_CARDBOARD }]}'}</u>
                </span>
                <img className='image device-phone' alt='' />
                <span className='detail phone'>
                  <p>
                    <b>
                      <u>{'{[{ VR_COMPATIBLE_ANDROID }]}'}</u>
                    </b>
                  </p>
                  <p>{'{[{ VR_ANDROID_DETAIL }]}'}</p>
                </span>
                <div className='detail daydream-label'>{'{[{ VR_NEED_DAYDREAM }]}'}</div>
              </div>
              <div className='tab-content native hidden'>
                <div className='badge-label'>{'{[{ VR_APP_FOR_ANDROID }]}'}</div>
                <span>
                  <img className='image badge-cardboard' alt='' />
                  <img className='image badge-oculus' alt='' />
                </span>
              </div>
            </div>
          </div>
          <div className='close'>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a>
              <i className='icon icon-close'></i>
            </a>
          </div>
          <div className='footer'>
            <div className='help'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>{'{[{ HELP }]}'}</a>
            </div>
            <div>|</div>
            <div className='terms'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>{'{[{ MATTERPORT_TERMS }]}'}</a>
            </div>
          </div>
        </div>

        <div id='gui-spinner' style={{ display: 'none' }}>
          <div className='gui-spinner-icon'></div>
        </div>

        <div id='gui-message' className='message-outer darkGlass' style={{ display: 'none' }}>
          <h2 className='model-title'> </h2>
          <div className='message-inner'>
            <div className='message-content'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a id='button-play'>
                <i className='icon icon-play'></i>
              </a>
              <div className='explore'>{'{[{ EXPLORE_3D_SPACE }]}'}</div>
            </div>
          </div>
        </div>

        <div id='share-modal' style={{ display: 'none' }}>
          <div className='title'>{'{[{ SOCIAL_SHARING }]}'}</div>
          <div id='share-outer'>
            <div className='share-to'>{'{[{ SHARE_TO }]}'}</div>
            <div className='share-images'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a id='facebook-share'>
                <div className='share-button'>
                  <span className='faceBookLink'>
                    <i className='icon icon-facebook'></i>
                  </span>
                </div>
              </a>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a id='twitter-share'>
                <div className='share-button'>
                  <span className='twitterLink'>
                    <i className='icon icon-twitter'></i>
                  </span>
                </div>
              </a>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a id='mail-share'>
                <div className='share-button'>
                  <span className='mailLink'>
                    <i className='icon icon-email'></i>
                  </span>
                </div>
              </a>
            </div>
            <div className='direct-link'>{'{[{ SHARE_LINK }]}'}</div>
            <div id='share-url'>
              <span id='share-url-text'></span>
            </div>
            <div id='copy-success' className='hidden'>
              <span id='copy-success-text'>{'{[{ SHARE_COPIED }]}'}</span>
            </div>
          </div>
          <div id='share-close' className='close'>
            <i className='icon icon-close'></i>
          </div>
        </div>

        <div id='terms-modal' className='fadeOut' style={{ display: 'none' }}>
          <div id='terms-text'></div>
          <div className='close'>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a>
              <i className='icon icon-close'></i>
            </a>
          </div>
        </div>

        <div className='gui-error message-outer' style={{ display: 'none' }}>
          <div className='message-inner'>
            <div className='message-content'>
              <div className='error-problem-text'></div>
              <div className='error-solution-text'></div>
              <div className='error-explanation'></div>
              <div className='error-actions'></div>
            </div>
          </div>
        </div>

        <div id='help-dialog' className='nav-help-dialog' style={{ display: 'none' }}>
          <div className='nav-help-elements'>
            <div className='help-tabs'>
              <div className='navigation-tab'>
                <span>{'{[{ HELP_NAVIGATION_TAB }]}'}</span>
              </div>
              <div className='more-help-tab'>
                <span>{'{[{ HELP_MORE_HELP_TAB }]}'}</span>
              </div>
            </div>
          </div>
          <div id='navigation-help-wrapper'>
            <div id='navigation-help' className='help outer'>
              <div className='interactions left'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <hr />
                <div className='bottom-info'></div>
                <img className='keyboard' alt='' />
              </div>
              <div className='interactions middle'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <hr />
                <div className='bottom-info'></div>
                <img className='keyboard' alt='' />
              </div>
              <div className='interactions right'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <hr />
                <div className='bottom-info'></div>
                <img className='keyboard' alt='' />
              </div>
            </div>
          </div>
          <div id='more-help-wrapper'>
            <div id='more-help'>
              <div className='ui-instructions more-help-hlr'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-tour'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-dollhouse'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-inside'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-360'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-floors'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-tag'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-vr'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-fullscreen'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
              <div className='ui-instructions more-help-zoom'>
                <h2 className='top-info'> </h2>
                <img className='big-image' alt='' />
                <div className='bottom-info'></div>
              </div>
            </div>
          </div>
          <div className='close'>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a>
              <i className='icon icon-close'></i>
            </a>
          </div>
        </div>

        <div id='vr-modal' className='vr-popup' style={{ display: 'none' }}>
          <div className='title'>{'{[{ VR_VIEW_SPACE }]}'}</div>
          <div className='outer'>
            <div className='inner'>
              <h3 className='vr-popup-title'>
                <span className='show-supported p1'>
                  <p className='center'>{'{[{ VR_SHOW_SUPPORTED }]}'}</p>
                </span>
                <span className='show-unsupported p1'>{'{[{ VR_SHOW_UNSUPPORTED }]}'}</span>
                <span className='show-ios p1'>
                  {'{[{ VR_SHOW_IOS_1 }]}'}
                  <br />
                  <br />
                </span>
                <span className='show-ios p2'>{'{[{ VR_WHAT_YOU_NEED }]}'}</span>
              </h3>
              <div className='vr-images'>
                <div className='img-container cardboard first'>
                  <img className='vr-sm-image first' alt='' />
                  <div className='vr-img-caption first'>
                    <span className='show-supported show-desktop show-ios p1'>
                      <b className='cardboard'>{'{[{ VR_GOOGLE_CARDBOARD }]}'}</b>
                      <b className='gearvr hidden'>{'{[{ VR_SAMSUNG_GEAR_VR }]}'}</b>
                    </span>

                    <span className='show-supported show-unsupported show-desktop p2'>
                      {'{[{ VR_NEED_CARDBOARD}]}'}
                    </span>
                    <span className='show-supported show-unsupported show-desktop p3'>
                      {'{[{ VR_NEED_SAMSUNG}]}'}
                    </span>
                    <span className='show-ios p2'>
                      <b>{'{[{ VR_GOOGLE_CARDBOARD }]}'}</b>
                      <br />
                      <br />
                    </span>
                  </div>
                </div>
                <div className='front-close'>
                  <span className='front-close-x'>&#x2715;</span>
                </div>
                <div className='img-container gearvr second'>
                  <img className='vr-sm-image second' alt='' />
                  <div className='vr-img-caption second'>
                    <span className='show-supported show-desktop p1'>
                      <b>{'{[{ VR_SAMSUNG_GEAR_VR }]}'}</b>
                    </span>
                    <span className='show-supported p2'>
                      <p>
                        <b>{'{[{ VR_COMPATIBLE_ANDROID }]}'}</b>
                      </p>
                      <p>{'{[{ VR_ANDROID_DETAIL }]}'}</p>
                    </span>
                    <span className='show-desktop p2'>
                      <p>
                        <b>{'{[{ VR_COMPATIBLE_IPHONES_1 }]}'}</b>
                      </p>
                      <p>{'{[{ VR_COMPATIBLE_IPHONES_2 }]}'}</p>
                    </span>
                    <span className='show-ios p2'>
                      <p>
                        <b id='vr-compatible-iphones-3'>{'{[{ VR_COMPATIBLE_IPHONES_3 }]}'}</b>
                      </p>
                      <p id='vr-compatible-iphones-2b'>{'{[{ VR_COMPATIBLE_IPHONES_2 }]}'}</p>
                    </span>
                    <span className='show-unsupported p1 p2'>
                      <p>
                        <b>{'{[{ VR_COMPATIBLE_ANDROID }]}'}</b>
                      </p>
                      <p>{'{[{ VR_ANDROID_DETAIL }]}'}</p>
                    </span>
                    <span className='show-supported show-unsupported show-desktop p3'>
                      <p>
                        <b>{'{[{ VR_COMPATIBLE_SAMSUNG }]}'}</b>
                      </p>
                      <p>{'{[{ VR_SAMSUNG_DETAIL }]}'}</p>
                    </span>
                  </div>
                </div>
                <div className='img-container third'>
                  <img className='vr-sm-image third' alt='' />
                  <div className='vr-img-caption third'>
                    <span className='show-supported show-unsupported show-ios p2'>
                      <p>
                        <b>{'{[{ VR_APP_FOR_CARDBOARD }]}'}</b>
                      </p>
                      <p>
                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                        <a className='cardboardLink'>{'{[{ VR_DOWNLOAD_HERE }]}'}</a>
                      </p>
                    </span>
                    <span className='show-desktop p2'>
                      <p>
                        <b>{'{[{ VR_ANDROID_DVICES }]}'}</b>
                      </p>
                      <p>{'{[{ VR_ANDROID_DETAIL }]}'}</p>
                    </span>
                    <span className='show-supported show-unsupported p3'>
                      <p>
                        <b>{'{[{ VR_APP_FOR_SAMSUNG }]}'}</b>
                      </p>
                      <p>
                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                        <a className='gearLink'>{'{[{ VR_DOWNLOAD_HERE }]}'}</a>
                      </p>
                    </span>
                  </div>
                </div>
              </div>
              <div className='vr-popup-body'>
                <span className='show-supported p1'>
                  <p>
                    <i>{'{[{ VR_REQUIRE_HEADSET }]}'}</i>
                  </p>
                  <br />
                  <p>
                    <i>{'{[{ VR_REDIRECT_TO_STORE }]}'}</i>
                  </p>
                  <br />
                  <p className='improper-embed hidden'>
                    <i>{'{[{ VR_IMPROPER_EMBED }]}'}</i>
                  </p>
                </span>
                <span className='show-ios p1'>
                  <p>
                    <i id='show-ios-2'>{'{[{ VR_SHOW_IOS_2 }]}'}</i>
                  </p>
                </span>
                <span className='show-desktop p1'>
                  <p></p>
                  <h3>{'{[{ VR_OPEN_ANDROID_LINK }]}'}</h3>
                  <p>
                    <br />
                  </p>
                  <p className='logo-button'>
                    <span className='modelLink'></span>
                  </p>
                  <br />
                  <br />
                  <p></p>
                  <h3>{'{[{ VR_ANDROID_OPTIONS }]}'}</h3>
                  <p></p>
                </span>
              </div>
            </div>
            <div className='vr-buttons'>
              <div className='next-button'></div>
              <div className='prev-button'>{'{[{ VR_PREVIOUS_CAPS }]}'}</div>
              <div className='vr-arrows prev-container'></div>
              <div className='vr-arrows next-container'></div>
            </div>
            <div className='vr-page'></div>
            <div className='close'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i className='icon icon-close'></i>
              </a>
            </div>
          </div>
        </div>

        <div id='quick-blackout' className='quick' style={{ display: 'none' }}></div>
        <div id='quick-logo' className='quick-brand' style={{ display: 'none' }}></div>

        <div id='hover-top' className='hover-row' style={{ display: 'none' }}></div>
        <div id='hover-bottom' className='hover-row' style={{ display: 'none' }}></div>
        <div id='call-to-action'>
          <div id='pause-overlay' style={{ display: 'none' }}>
            <div id='pause-icon'>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a>
                <i className='icon icon-pause'></i>
              </a>
            </div>
          </div>
          <div id='interaction-modal'>
            <div id='interaction-modal-inner'>
              <div className='nav-icon'>
                <img src='images/pc_step1.png' className='icon' title='导览' data-page='1' alt='' />
                <div className='nav-help-button'>
                  <div className='next-button nav-help-page' data-id='plus'></div>
                  <div className='prev-button nav-help-page'></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id='tag-billboards' style={{ display: 'none' }}></div>
      </div>
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home