import 'leaflet/dist/leaflet.css';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useRecipe, Grid, GridItem, useDialog } from "@chakra-ui/react";
import { createContext } from "react";
import Login from "@/Login.jsx";
import Sidebar from "./components/Sidebar/Sidebar.jsx";
import DialogPopup from "@/components/Canvas/CanvasComponents/DialogPopup.jsx";
import Header from "@/components/Header/Header.jsx";
import Home from "./components/Canvas/views/Home.jsx";
import RegionalMap from "./components/Canvas/views/RegionalMap.jsx";
import Volcano from "@/components/Canvas/views/Volcano.jsx";
import GlobalMap from "./components/Canvas/views/GlobalMap.jsx";
import Admin from "./components/Canvas/views/Admin.jsx";

function AppFoundation({children}) {
  const recipe = useRecipe({ key: "dashboard" });
  const styles = recipe();
  const dialog = useDialog();

  return (
    <>
      <DialogPopup dialog={dialog} />
      <Grid css={styles}
        templateRows="1fr 11fr"
        templateColumns="auto 1fr"
        height="100vh"
        width="100vw"
      >
        <GridItem rowSpan={1} colSpan={2}>
          <Header />
        </GridItem>
        <GridItem colSpan={1}>
          <Sidebar />
        </GridItem>
        <GridItem colSpan={1} width="100%" overflow="auto">
          {children}
        </GridItem>
      </Grid>
    </>
  )
}

// function ProtectedRoute({ user, children }) {
//   if (user) return children;
//   else return <Navigate to="/login" replace />;
// }

function App() {
    const sidebarContext = createContext(["Home", "Global Map", "Regional Map", "Volcano", "Admin"]);
    // const [user, setUser] = useState(null);

    return (
        <Routes>
            {/*Public Routes*/}
            <Route path="/login" element={<Login />} />
            <Route path="/home" element={<AppFoundation> <Home/> </AppFoundation>} />
            <Route path="/global-map" element={<AppFoundation> <GlobalMap/> </AppFoundation>} />
            <Route path="/regional-map" element={<AppFoundation> <RegionalMap/> </AppFoundation>} />
            <Route path="/volcano" element={<AppFoundation> <Volcano/> </AppFoundation>} />
            <Route path="/admin" element={<AppFoundation> <Admin/> </AppFoundation>} />

            {/*Non-Public Routes*/}
            <Route element={<AppFoundation />}>
                <Route path="/home" element={<Home />} />
                <Route path="/global-map" element={<GlobalMap />} />
                <Route path="/regional-map" element={<RegionalMap />} />
                <Route path="/volcano" element={<Volcano />} />
                <Route path="/admin" element={<Admin />} />
            </Route>

            {/*Redirect Routes*/}
            <Route path="/" element={<Navigate to="/home" replace />} />
      </Routes>
  );
}

export default App