import { useEffect, useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LeftSide from "./components/LeftSide";
import RightSide from "./components/RightSide";
import Login from "./components/Login";
import Grid from "@mui/material/Grid2";
import Register from "./components/Register";
import CreateLog from "./components/CreateLog";
import Nav from "./components/Nav";

function App() {
  const [authorized, setAuthorized] = useState(false);
  const [reset, setReset] = useState(true);
  useEffect(() => {
    if (localStorage.getItem("token") !== null) setAuthorized(true);
    else setAuthorized(false);
  }, [authorized]);
  return (
    <Router>
      <Nav authorized={authorized} setAuthorized={setAuthorized} />
      <Routes>
        <Route
          path="/"
          element={
            <>
              <Grid container spacing={2}>
                <Grid size={{ lg: 12, xl: 6 }}>
                  <LeftSide reset={reset} setReset={setReset} />
                </Grid>
                <Grid size={6}>
                  <RightSide reset={reset} />
                </Grid>
              </Grid>
            </>
          }
        />
        <Route
          path="/login"
          element={<Login setAuthorized={setAuthorized} />}
        />
        <Route path="/register" element={<Register />} />
        <Route
          path="/createlog"
          element={<CreateLog authorized={authorized} />}
        />
      </Routes>
    </Router>
  );
}

export default App;
