import {
  Box,
  Button,
  Container,
  Grid2,
  Switch,
  TextField,
  Typography,
  useTheme,
} from "@mui/material";

import { HeaderBar } from "../HeaderBar/HeaderBar";
import { AttackItem } from "../Home/AttackItem";

export const Layout = () => {
  // contexts
  const theme = useTheme();

  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.default,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <HeaderBar />
      <Container
        maxWidth="lg"
        sx={{
          justifyContent: "center",
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          overflow: "auto",
          p: 1,
        }}
      >
        {/* main content goes here buddy */}
        <Box
          sx={{
            mb: 2,
          }}
        >
          <Box
            sx={{
              alignItems: "center",
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
            }}
          >
            <Typography
              sx={{
                mb: 2,
              }}
              variant="h3"
            >
              CSPJ Application Attacks
            </Typography>
            <Box>
              Secured version
              <Switch />
            </Box>
          </Box>
          <Box
            sx={{
              alignItems: "center",
              display: "flex",
              flexDirection: "row",
            }}
          >
            {/* 
            TODO: implmenent simple ping server to check if the user entered a valid backend url
            debounce when typing
            update textfield color based on the response
            */}
            <TextField
              fullWidth
              label="Paste your backend URL here"
              value={process.env.PGHOST}
            />
          </Box>
          <Button href="https://github.com/cspj-nyp/cspj-application">
            Need help getting started?
          </Button>
        </Box>
        <Grid2 container spacing={2}>
          <Grid2 size={3}>
            <AttackItem attackName="SQL Injection" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="Cross Site Scripting" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="Command Injection" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="File Inclusion Attacks" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="CSRF" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="Directory Traversal" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="Insecure Desrialization" />
          </Grid2>
          <Grid2 size={3}>
            <AttackItem attackName="Session Hijacking" />
          </Grid2>
        </Grid2>
      </Container>
    </Box>
  );
};
