import React, { Suspense, useEffect, useState } from "react";
import {
  HashRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { useAppDispatch, useAppSelector } from "./app/hooks";

import AuthRedirect from "./components/AuthRedirect";
import { verify } from "./features/auth/auth-slice";
import { GlobalStyles } from "./styles/GlobalStyles";

const Login = React.lazy(() => import("./pages/login"));
const Register = React.lazy(() => import("./pages/register"));
const Learn = React.lazy(() => import("./pages/Learn/Learn"));
const Decks = React.lazy(() => import("./pages/Decks/Decks"));
const Deck = React.lazy(() => import("./pages/Deck/Deck"));
const BaseLayout = React.lazy(() => import("./layouts/Base/Base"));
const Loading = () => <p>Loading</p>;

const App: React.FC = () => {
  const dispatch = useAppDispatch();
  const state = useAppSelector((state) => state.auth.state);
  useEffect(() => {
    dispatch(verify());
  }, []);
  return (
    <>
      <GlobalStyles />
      {state == "loading" ? (
        <Loading />
      ) : (
        <Router>
          <Routes>
            <Route
              path="login"
              element={
                <AuthRedirect isAuthenticated={false} to="/app">
                  <Suspense fallback={<Loading />}>
                    <Login />
                  </Suspense>
                </AuthRedirect>
              }
            />
            <Route
              path="register"
              element={
                <AuthRedirect isAuthenticated={false} to="/app">
                  <Suspense fallback={<Loading />}>
                    <Register />
                  </Suspense>
                </AuthRedirect>
              }
            />
            <Route
              path="app"
              element={
                <AuthRedirect isAuthenticated={true} to="/login">
                  <Suspense fallback={<Loading />}>
                    <BaseLayout />
                  </Suspense>
                </AuthRedirect>
              }
            >
              <Route
                index
                element={
                  <Suspense fallback={<Loading />}>
                    <Learn />
                  </Suspense>
                }
              />
              <Route
                path="learn"
                element={
                  <Suspense fallback={<Loading />}>
                    <Learn />
                  </Suspense>
                }
              />
              <Route
                path="decks"
                element={
                  <Suspense fallback={<Loading />}>
                    <Decks />
                  </Suspense>
                }
              />
              <Route
                path="decks/:id"
                element={
                  <Suspense fallback={<Loading />}>
                    <Deck />
                  </Suspense>
                }
              />
              <Route path="decks/new" element={<h2>Not Implemented</h2>} />
              <Route path="*" element={<div>NotFound</div>} />
            </Route>
            <Route path="*" element={<Navigate to="app" replace />} />
          </Routes>
        </Router>
      )}
    </>
  );
};

export default App;
