import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Divider, Tab, useTheme } from "@mui/material";
import { useState } from "react";
import { SqlInjectionLogin } from "./SqlInjectionLogin";
import { SqlInjectionRegister } from "./SqlInjectionRegister";
import { SqlInjectionSetup } from "./SqlInjectionSetup";

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

  // states
  const [subTabValue, setSubTabValue] = useState("setup");

  // logic for switching tabs
  const subTabChangeEvent = (newTabValue: string) => {
    setSubTabValue(newTabValue);
  };

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <Box
        sx={{
          border: "solid 1px grey",
          borderRadius: 2,
          display: "flex",
          flexDirection: "column",
          maxHeight: "90vh",
          width: "400px",
        }}
      >
        <TabContext value={subTabValue}>
          <TabList
            onChange={(_, value) => {
              subTabChangeEvent(value);
            }}
            scrollButtons={true}
            sx={{
              borderBottom: "1px solid " + theme.palette.divider,
            }}
            variant="standard"
          >
            <Tab
              label="Setup"
              value="setup"
            />
            <Tab
              label="Register"
              value="register"
            />
            <Tab
              label="Login"
              value="login"
            />
          </TabList>
          <Box
            sx={{
              minHeight: "500px",
              display: "flex",
              flexDirection: "column",
              flexGrow: 1,
              overflowY: "auto",
              p: 2,
              width: "100%",
            }}
          >
            <TabPanel
              sx={{ p: 2 }}
              value="setup"
            >
              <SqlInjectionSetup />
            </TabPanel>
            <TabPanel
              sx={{ p: 2 }}
              value="register"
            >
              <SqlInjectionRegister />
            </TabPanel>
            <TabPanel
              sx={{ p: 2 }}
              value="login"
            >
              <SqlInjectionLogin />
            </TabPanel>
            {/* <Divider />
            the logged in account details goes here */}
          </Box>
        </TabContext>
      </Box>
    </Box>
  );
};