import React, { useEffect } from 'react'
import GameDashboard from './components/GamesDashboard'
import { Redirect, Route, Switch, useLocation } 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 NotFound from './errors/NotFound'
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 SomethingWentWrong from './errors/SomethingWentWrong'
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";

function App() {
  const location = useLocation<Location>()
  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()

  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 /> : ''}
      <Route exact path='/'>
        {loggedIn ? <Redirect to='/games' /> : <Home />}
      </Route>
      <Box mt={loadedPreferences.get().stickyNav ? "20" : "4"} mb={'4'}>
        {/*<Box mt={loadedPreferences.get().stickyNav ? isSmallerThan768 ? "15%" : "9%" : "4"} mb={'4'}>*/}
        <Switch>
          <Route
              key={location.key}
              path={['/games/create', '/games/:id/edit']}
              component={() => <GameForm />}
          />
          <Route path='/games/:id'>
            <GameDetails />
          </Route>
          <Route path='/games'>
            <GameDashboard />
          </Route>
          <Route path='/nogames'>
            <NoGames />
          </Route>
          <Route path='/login'>
            <LoginForm />
          </Route>
          <Route path='/profile'>
            <UserProfile />
          </Route>
          <Route path='/forgotpassword'>
            <ForgotPassword />
          </Route>
          <Route path='/resetpassword/:token'>
            <ResetPassword />
          </Route>
          <Route path='/create-user'>
            <CreateUser />
          </Route>
          <Route path='/edit-user'>
            <EditUser />
          </Route>
          <Route path='/errors'>
            <TestErrors />
          </Route>
          <Route path='/something-went-wrong'>
            <SomethingWentWrong />
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Box>
      {loggedIn ? <Footer /> : ''}
    </>
  )
}

export default App