import React, { useContext, useState } from "react";
import { Routes, Route, useNavigate } from "react-router-dom";
import { getAuth } from "firebase/auth";
import Login from "./Components/Login/Login";
import DemoRequestPage from "./Components/Home/DemoRequestPage";
import Privacy from "./Components/Privacy";
import Accessibility from "./Components/Accessibility";
import SignupPage from "./Components/SignupPage/SignupPage";
import PasswordReset from "./Components/Account/PasswordReset";
import DocumentListPage from "./Components/Document/DocumentListPage";
import DocEditPage from "./Components/Document/DocEditPage";
import Homepage from "./Components/Home/HomePage";
import HomepageB from "./Components/Home/HomePageB";
import Dashboard from "./Components/Dashboard/Dashboard";
import OptoutPage from "./Components/OptoutPage";
import RequestEditPage from "./Components/Document/ReqEditPage";
import CaseListPage from "./Components/Case/CaseListPage";
import CaseDetailsPage from "./Components/Case/CaseDetailsPage";
import CaseTypePage from "./Components/Case/CaseTypePage";
import Footer from "./Components/Footer/Footer";
import Navbar from "./Components/Navigation/Navbar";
import AccountPage from "./Components/Account/AccountPage";
import SettingsPage from "./Components/Account/SettingsPage";
import TermsOfService from "./Components/TermsOfService";
import ScrollToTop from "./Components/ScrollToTop";
import PrivateRoute from "./Components/PrivateRoute";
import FeaturesPage from "./Components/Features/FeaturesPage";
import { AppContext } from "./Hooks/useContext/appContext";
import { AuthContext } from "./Context/AuthProvider";
import HowToPage from "./Components/HowTo/HowToPage";

function App() {
  const [settingsOpen, toggleSettingsOpen] = useState();
  const { appState } = useContext(AppContext);
  const { currentUserEmail } = useContext(AuthContext);
  const { group } = appState;
  const navigate = useNavigate();

  // wait for user information
  if (typeof currentUserEmail === "undefined") {
    return null;
  }

  return (
    <>
      <ScrollToTop />
      <Navbar />
      <div className="main-container">
        <Routes>
          <Route exact path="/" element={<HomepageB />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/optout" element={<OptoutPage />} />
          <Route
            path="/signup/:isUpgrade?/:currentPlan?"
            element={<SignupPage />}
          />
          <Route path="/requestpage/:supReq" element={<DemoRequestPage />} />
          <Route
            exact
            path="/passwordreset/:mode?/:oobCode?"
            element={<PasswordReset />}
          />
          <Route exact path="/privacy" element={<Privacy />} />
          <Route exact path="/accessibility" element={<Accessibility />} />
          <Route exact path="/features" element={<FeaturesPage />} />
          <Route exact path="/tos" element={<TermsOfService />} />
          <Route
            exact
            path="/dashboard"
            element={
              <PrivateRoute>
                <Dashboard />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/cases"
            element={
              <PrivateRoute>
                <CaseListPage perPage={10} />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/casetype/:caseId"
            element={
              <PrivateRoute>
                <CaseTypePage />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/casedetails/:caseId"
            element={
              <PrivateRoute>
                <CaseDetailsPage />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/documents/:docId?/:docType?/:caseId?"
            element={
              <PrivateRoute>
                <DocumentListPage perPage={10} />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/how-to"
            element={
              <PrivateRoute>
                <HowToPage />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/account"
            element={
              <PrivateRoute>
                <AccountPage />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/settings"
            element={
              <PrivateRoute>
                <SettingsPage />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/docedit/:documentId/:caseId/:docType/:clientPosition/:responseGenerations"
            element={
              <PrivateRoute>
                <DocEditPage />
              </PrivateRoute>
            }
          />
          <Route
            exact
            path="/reqedit/:documentId/:documentType/:caseId"
            element={
              <PrivateRoute>
                <RequestEditPage />
              </PrivateRoute>
            }
          />
        </Routes>
      </div>
      <Footer />
    </>
  );
}

export default App;