import "./App.css";
import { Login } from "./pages/Login.tsx";
import icon from "./paella-icon.png";
import { Outlet, Route, Routes } from "react-router";
import { SignUp } from "./pages/SignUp.tsx";
import { Register } from "./pages/Register.tsx";
import { Buy } from "./pages/Buy.tsx";
import { useState } from "react";
import { PreLoginPageContext } from "./context/pre-login-page-context.ts";
import { LoggedInPageContext } from "./context/logged-in-page-context.ts";
import { NotFound } from "./pages/NotFound.tsx";
import { BuyReturn } from "./pages/BuyReturn.tsx";
import { Grid, Paper } from "@mui/material";

function App() {
  const [userId, setUserId] = useState<string | null>(
    window.localStorage.getItem("paysplit-user-id")
  );
  const storeUserId = (id: string) => {
    window.localStorage.setItem("paysplit-user-id", id.toString());
    setUserId(id);
  };

  return (
    <Paper
      elevation={2}
      sx={{
        padding: "50px 20px",
        bgcolor: "lightblue",
        borderRadius: 4,
        maxWidth: "400px",
        margin: "auto",
      }}
    >
      <Grid container direction="column" alignContent="center" spacing={2}>
        <img className="app-logo" src={icon} alt="App logo" />
        <Routes>
          <Route
            element={
              <PreLoginPageContext.Provider value={{ setUserId: storeUserId }}>
                <Outlet />
              </PreLoginPageContext.Provider>
            }
          >
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
          </Route>
          <Route
            element={
              <LoggedInPageContext.Provider value={{ userId: userId! }}>
                <Outlet />
              </LoggedInPageContext.Provider>
            }
          >
            <Route path="/signup" element={<SignUp />} />
            <Route path="/buy" element={<Buy />} />
            <Route path="/buy/return" element={<BuyReturn />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Grid>
    </Paper>
  );
}

export default App;