import '@/assets/styles/base.css'
// 关于路由
import React, { useCallback, useEffect, useRef } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import history from './utils/history'
import SpinLoding from './components/SpinLoding'

import NotFound from '@/components/NotFound'
import store, { RootState } from './store'
import { baseURL, isLoc, myData } from './utils/http'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import { useSelector } from 'react-redux'
import Zguide from './components/Zguide'

// import Vconsole from 'vconsole'
// new Vconsole()

// import { isLoc, myData } from './utils/http'
const A1home = React.lazy(() => import('./pages/A1home'))
const A1_1base = React.lazy(() => import('./pages/A0base'))
const A2yblm = React.lazy(() => import('./pages/A2yblm'))
const A3beie = React.lazy(() => import('./pages/A3beie'))
const A4quanwen = React.lazy(() => import('./pages/A4quanwen'))
const A5wenwu = React.lazy(() => import('./pages/A5wenwu'))

declare global {
  //设置全局属性
  interface Window {
    //window对象属性
    isHH: boolean //加入对象
    unityOpenHot: (name: string) => void
    unityBack: () => void
  }
}

let tempW = document.documentElement.clientWidth
let tempH = document.documentElement.clientHeight

let tempMax = tempW >= tempH ? tempW : tempH
let tempMin = tempW >= tempH ? tempH : tempW

const pageBi = Math.round(Number((tempMax / tempMin).toFixed(2)))

// 设计图按照 844 X 390 来开发
const planSize = {
  width: 844,
  height: Math.round(Number((844 / pageBi).toFixed(0)))
}

export default function App() {
  useEffect(() => {
    // 打包环境 刷新页面从 首页 开始
    // if (!isLoc && myData.isLdong) {
    //   if (window.location.hash !== '#/') {
    //     window.location.href = window.location.origin
    //   }
    // }
  }, [])

  // 根元素
  const rootRef = useRef<any>(null)

  const pageFullChangeFu = useCallback(() => {
    let width = document.documentElement.clientWidth
    let height = document.documentElement.clientHeight

    let isHHTemp = false

    if (width >= height) {
      if (tempMax - width > 100) return

      //横屏
      isHHTemp = true
      const sizeW = width / planSize.width
      let sizeH = height / planSize.height

      let moveX = (planSize.width - width) / 2
      let moveY = (planSize.height - height) / 2

      if (width >= planSize.width) moveX = 0
      rootRef.current.style.left = '0'
      rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH}) rotate(0deg)`
      rootRef.current.style.transformOrigin = 'center'

      store.dispatch({
        type: 'layout/style',
        payload: {
          width: planSize.width,
          moveX: -moveX,
          moveY: -moveY,
          sizeW,
          sizeH
        }
      })
    } else {
      if (tempMax - height > 100) return

      // 竖屏
      isHHTemp = false
      const temp = width
      width = height
      height = temp

      const sizeW = width / planSize.width
      let sizeH = height / planSize.height

      rootRef.current.style.left = '100%'
      rootRef.current.style.transform = `rotate(90deg) scale(${sizeW},${sizeH})`

      rootRef.current.style.transformOrigin = 'left top'
    }

    // 横竖屏变化的时候 刷新页面

    // if (window.isHH !== isHHTemp) {
    //   window.location.reload()
    // }

    store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
  }, [])

  const audioPlayFu = useCallback(() => {
    // 播放背景音乐
    const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
    if (audioDom) {
      if (audioDom.paused) audioDom.play()
      else rootRef.current.removeEventListener('click', audioPlayFu)
    }
  }, [])

  useEffect(() => {
    rootRef.current = document.querySelector('#root')
    rootRef.current.style.width = planSize.width + 'px'
    rootRef.current.style.height = planSize.height + 'px'

    pageFullChangeFu()
    window.addEventListener('resize', pageFullChangeFu, false)

    // 全局点击都播放背景音乐
    if (myData.isLdong && !isLoc) rootRef.current.addEventListener('click', audioPlayFu)
  }, [audioPlayFu, pageFullChangeFu])

  // 分享和点赞
  const { guideVideo } = useSelector((state: RootState) => state.A0Layout)

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            <Route path='/' component={A1home} exact />
            <Route path='/base' component={A1_1base} exact />
            <Route path='/yblm' component={A2yblm} exact />
            <Route path='/beie' component={A3beie} exact />
            <Route path='/quanwen' component={A4quanwen} exact />
            <Route path='/wenwu' component={A5wenwu} exact />
            <Route path='*' component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      {/* 背景音乐 */}
      <audio id='bgMp3' loop style={{ display: 'none' }} src={baseURL + 'home/bg.mp3'}></audio>

      {/* 发送请求的加载组件 */}
      <AsyncSpinLoding />
      {/* 操作指引视频 */}
      {guideVideo ? (
        <Zguide
          src={guideVideo}
          closeFu={() => store.dispatch({ type: 'layout/guideVideo', payload: '' })}
        />
      ) : null}
    </>
  )
}
