import { Box, Container, useTheme } from "@mui/material";
import { useAtom } from "jotai";
import { HeaderBar } from "../components/HeaderBar/HeaderBar";
import { Home } from "../components/Pages/Home/Home";
import { SqlInjection } from "../components/Pages/SqlInjection/SqlInjection";
import { Xss } from "../components/Pages/Xss/Xss";
import { routeAtom } from "../lib/jotai";
import { AttackPage } from "../components/Pages/Shared/AttackPage";

export default function Index() {
  // contexts
  const theme = useTheme();

  // atoms
  const [route, setRoute] = useAtom(routeAtom);

  // render different components based on the route value
  const renderComponent = () => {
    switch (route) {
      case "home":
        return <Home />;
      case "sql_injection":
        return <SqlInjection />;
      case "xss":
        return <Xss />;
      // TODO: remove testing when done
      case "testing":
        return <AttackPage />;
      default:
        return <Home />;
    }
  };

  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.default,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <HeaderBar />
      <Container
        maxWidth='lg'
        sx={{
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          overflow: "auto",
          p: 1,
        }}
      >
        {/* main content goes here buddy */}
        {renderComponent()}
      </Container>
    </Box>
  );
}
