import * as React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Navbar from "./components/Navbar.tsx";
import NavbarButton from "./components/NavbarButton.tsx";
import NavbarUserInfo from "./components/NavbarUserInfo.tsx";

import Home from "./pages/Home.tsx";
import Blog from "./pages/Blog.tsx";
import Login from "./pages/Login.tsx";
import Logout from "./pages/Logout.tsx";
import About from "./pages/About.tsx";
import Settings from "./pages/Settings.tsx";
import BlogEditor from "./pages/BlogEditor.tsx";

import {
  usernameStorageHandlerInit,
  authTokenStorageHandlerInit,
  userIDStorageHandlerInit,
} from "./components/storageHandler.ts";

function getUserIDbyAuthToken(
  authTokenStorageHandler: object,
  userIDStorageHandler: object,
) {
  if (
    authTokenStorageHandler.authTokenValue &&
    !userIDStorageHandler.userIDValue
  ) {
    fetch("http://127.0.0.1:8000/api/user/IDByAuthToken", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        authToken: authTokenStorageHandler.authTokenValue,
      },
    })
      .then((response) => response.json())
      .then((responseParsed: Object) => {
        if (responseParsed.success) {
          userIDStorageHandler.setUserIDValue(responseParsed.userID);
        }
      });
  }
}

export default function App() {
  const usernameStorageHandler = usernameStorageHandlerInit();
  const authTokenStorageHandler = authTokenStorageHandlerInit();
  const userIDStorageHandler = userIDStorageHandlerInit();

  getUserIDbyAuthToken(authTokenStorageHandler, userIDStorageHandler);

  return (
    <>
      <BrowserRouter>
        <Navbar>
          <NavbarButton>Home</NavbarButton>
          <NavbarButton>About</NavbarButton>
          {userIDStorageHandler.userIDValue ? (
            <>
              <NavbarButton>BlogEditor</NavbarButton>
              <NavbarButton>Settings</NavbarButton>
              <NavbarButton>Logout</NavbarButton>
              <NavbarUserInfo
                usernameStorageHandler={usernameStorageHandler}
                userID={userIDStorageHandler.userIDValue}
              ></NavbarUserInfo>
            </>
          ) : (
            <NavbarButton>Login</NavbarButton>
          )}
        </Navbar>
        <div id="page">
          <Routes>
            <Route path="/" exact element={<Home></Home>} />
            <Route path="/home" exact element={<Home></Home>} />
            <Route path="/blog/*" exact element={<Blog></Blog>} />
            <Route path="/about" exact element={<About></About>} />
            <Route
              path="/blogeditor"
              exact
              element={
                <BlogEditor
                  authTokenStorageHandler={authTokenStorageHandler}
                ></BlogEditor>
              }
            />
            <Route
              path="/settings"
              exact
              element={
                <Settings
                  authTokenStorageHandler={authTokenStorageHandler}
                ></Settings>
              }
            />
            <Route
              path="/login"
              exact
              element={
                <Login
                  authTokenStorageHandler={authTokenStorageHandler}
                  usernameStorageHandler={usernameStorageHandler}
                ></Login>
              }
            />
            <Route
              path="/logout"
              exact
              element={
                <Logout
                  authTokenStorageHandler={authTokenStorageHandler}
                  usernameStorageHandler={usernameStorageHandler}
                  userIDStorageHandler={userIDStorageHandler}
                ></Logout>
              }
            />
          </Routes>
        </div>
      </BrowserRouter>
    </>
  );
}