import React, { useEffect } from 'react'
import GameDashboard from './components/GamesDashboard'
import {Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom'
import Header from './components/Header'
import Home from './components/Home'
import GameDetails from './components/GameDetails'
import GameForm from './components/GameForm'
import TestErrors from './errors/TestError'
import Footer from './components/Footer'
import LoginForm from './components/authComponents/LoginForm'
import {
  setAppLoaded,
  getUser,
  appLoadedState,
  loggedInState, loadedPreferences,
} from './stateManagement/userState'
import {useHookstate} from '@hookstate/core'
import { ToastContainer } from 'react-toastify'
import NoGames from './components/NoGames'
import CreateUser from './components/userComponents/CreateUser'
import LoadingModal from './components/LoadingModal'
import ForgotPassword from './components/authComponents/ForgotPassword'
import ResetPassword from './components/authComponents/ResetPassword'
import UserProfile from './components/userComponents/UserProfile'
import EditUser from './components/userComponents/EditUser'
import {Box, useColorMode} from "@chakra-ui/react";
import globalRouter from "./api/globalRouter";

function App() {
  const location = useLocation()
  const appLoaded = useHookstate(appLoadedState)
  const appLoad = appLoaded.get()
  const isLoggedIn = useHookstate(loggedInState)
  const loggedIn = isLoggedIn.get()
  const originalToken = window.localStorage.getItem('jwt')
  const { colorMode, toggleColorMode } = useColorMode()
  globalRouter.navigate = useNavigate()

  useEffect(() => {
    if (originalToken) getUser(originalToken).finally(() => setAppLoaded(true))
    else setAppLoaded(false)
  }, [originalToken])

  if (!appLoad) <LoadingModal />

  useEffect(() => {
    if(loadedPreferences.get().theme !== colorMode) {
      localStorage.removeItem('chakra-ui-color-mode')
      toggleColorMode()
    }
  }, [loadedPreferences.get().theme]);

  // noinspection SpellCheckingInspection
  return (
    <>
      <ToastContainer position='bottom-right' hideProgressBar />
      {loggedIn ? <Header /> : ''}
      <Box mt={loadedPreferences.get().stickyNav ? "20" : "4"} mb={'4'}>
        {/*<Box mt={loadedPreferences.get().stickyNav ? isSmallerThan768 ? "15%" : "9%" : "4"} mb={'4'}>*/}
        <Routes>
          <Route path='/*' element={loggedIn ? <Navigate to='games' /> : <Home />} />
          <Route path={'games/create'} element={<GameForm />} />
          <Route
              key={location.key}
              path={'games/:id/edit'}
              element={<GameForm />}
          />
          <Route path='games/:id' element={<GameDetails />} />
          <Route path='games' element={<GameDashboard />} />
          <Route path='nogames' element={<NoGames />} />
          <Route path='login' element={<LoginForm />} />
          <Route path='profile' element={<UserProfile />} />
          <Route path='forgotpassword' element={<ForgotPassword />} />
          <Route path='resetpassword/:token' element={<ResetPassword />} />
          <Route path='create-user' element={<CreateUser />} />
          <Route path='edit-user' element={<EditUser />} />
          <Route path='errors' element={<TestErrors />} />
        </Routes>
      </Box>
      {loggedIn ? <Footer /> : ''}
    </>
  )
}

export default App