protected routes

import React, { useEffect, useState } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Topbar from "./scenes/global/Topbar";
import Dashboard from "./scenes/dashboard";
import DashboardSales from "./scenes/dashboardsales/index";
import DashboardMerchant from "./scenes/dashboardmerchandiser/index";
import Contacts from "./scenes/contacts/index";
import MerchantInfo from "./scenes/contacts/app";
import Form from "./scenes/form/index.js";
import Merchant from "./scenes/merchant/app";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, tokens, useMode } from "./theme";
import Calendar from "./scenes/calendar/calendar";
import GoogleMap from "./scenes/maps/maps";
import RoutePlan from "./scenes/routeplan/RoutePlan";
import Home from "./Home";
import SignUpAdmin from "./SignAdmin";
import LoginAdmin from "./LoginAdmin";
import LoginSales from "./LoginSales";
import LoginMerchant from "./LoginMerchant";
import ProtectedRoute from "./ProtectedRoute";


function App() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // function setAuthState(state) {
  //   setIsAuthenticated(state)
  // }
  useEffect(() => {
    const token = localStorage.getItem("jwt");
    console.log({ token });

  }, [isAuthenticated]);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <main className="content">
            <Topbar setIsSidebar={setIsSidebar} />
            <Routes>
              <Route path="/" element={<Home />} />

              <Route path="/signup-admin" element={<SignUpAdmin />} />
              <Route path="/admin-log" element={<LoginAdmin />} />
              <Route path="/sales-log" element={<LoginSales />} />
              <Route path="/merchant-log" element={<LoginMerchant />} />
              {/* protect routesclear */}

              <Route
                path="/admin"
                element={
                  <ProtectedRoute
                    element={Dashboard}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/sales"
                element={
                  <ProtectedRoute
                    element={DashboardSales}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/merchant"
                element={
                  <ProtectedRoute
                    element={DashboardMerchant}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/contacts"
                element={
                  <ProtectedRoute
                    element={Contacts}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/merchantInfo"
                element={
                  <ProtectedRoute
                    element={MerchantInfo}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route path="/form" element={<Form />} />
              <Route path="/form-merchant" element={<Merchant />} />
              <Route path="/calendar" element={<Calendar />} />
              <Route path="/maps" element={<GoogleMap />} />
              <Route path="/routeplans" element={<RoutePlan />} />
            </Routes>
          </main>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export default App;