import "./App.css";
import {
  RouterProvider,
  createBrowserRouter,
  Navigate,
} from "react-router-dom";
import Login from "./pages/Login";
import Surveys from "./pages/Surveys";
import NewSurvey from "./pages/NewSurvey";
import SurveyResults from "./pages/SurveyResults";
import SurveyAssignees from "./pages/SurveyAssignees";
import Users from "./pages/Users";
import NavBar from "./components/NavBar";
import useLoginState from "./hooks/useLoginState";
import CssBaseline from "@mui/material/CssBaseline";
import CustomThemeProvider from "./CustomThemeProvider";

function routes({ login, logout, isLoggedIn }) {
  function withNavBar(component) {
    const navbarLinks = [
      { label: "Surveys", link: "/surveys" },
      { label: "New Survey", link: "/surveys/new" },
      { label: "Users", link: "/users" },
    ];
    return (
      <>
        <NavBar isLoggedIn={isLoggedIn} pages={navbarLinks} logout={logout} />
        {component}
      </>
    );
  }

  if (!isLoggedIn) {
    return [
      {
        path: "*",
        element: <Login login={login} />,
      },
    ];
  } else {
    return [
      {
        path: "/",
        element: <Navigate to={{ pathname: "/surveys" }} />,
      },
      {
        path: "/surveys",
        element: withNavBar(<Surveys />),
      },
      {
        path: "/surveys/new",
        element: withNavBar(<NewSurvey />),
      },
      {
        path: "/surveys/:surveyId/results",
        element: withNavBar(<SurveyResults />),
      },
      {
        path: "/surveys/:surveyId/assignees",
        element: withNavBar(<SurveyAssignees />),
      },
      {
        path: "/users",
        element: withNavBar(<Users />),
      },
    ];
  }
}

export default function App() {
  const { login, logout, isLoggedIn } = useLoginState();
  const currentRoutes = routes({ isLoggedIn, logout, login });
  return (
    <>
      <CssBaseline />
      <CustomThemeProvider>
        <RouterProvider router={createBrowserRouter(currentRoutes)} />
      </CustomThemeProvider>
    </>
  );
}