import 'leaflet/dist/leaflet.css';
import { Routes, Route } 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";

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>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<AppFoundation> <Home/> </AppFoundation>} />
        <Route path="/regional-map" element={<AppFoundation> <RegionalMap/> </AppFoundation>} />
        <Route path="/volcano" element={<AppFoundation> <Volcano/> </AppFoundation>} />
      </Routes>
  );
}

export default App