import React, { useRef, useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './page/home/iindex';
import QuestionList from './page/question/index';
import Rank from './page/rank/index';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

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)))

const App = () => {
  const rootRef = useRef<any>(null)
  const planSize = {
    width: 1920,
    height: Math.round(Number((1920 / pageBi).toFixed(0)))
  }

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


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

      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'
    } else {
      if (tempMax - height > 100) return

      // 竖屏
      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()
    // }

  }, [planSize.height, planSize.width])

  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)
  }, [pageFullChangeFu, planSize.height, planSize.width])

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/question" element={<QuestionList />} />
        <Route path="/rank" element={<Rank />} />
      </Routes>
    </Router>
  );
};


root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);