import React from "react";
import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  Box,
  useTheme,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { useNavigate, useLocation, To } from "react-router-dom";

const pages = [{ name: "Home", path: "/" }];

export default function Header() {
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const theme = useTheme();
  const navigate = useNavigate();
  const location = useLocation();

  const toggleDrawer = (open: boolean) => () => setDrawerOpen(open);

  const handleNavigate = (path: To) => {
    navigate(path);
    setDrawerOpen(false);
  };

  const drawerList = (
    <Box
      sx={{
        width: 250,
        height: "100%",
        bgcolor: theme.palette.background.default,
        color: theme.palette.text.primary,
      }}
      role="presentation"
      onKeyDown={toggleDrawer(false)}
    >
      <Typography
        variant="h6"
        sx={{
          textAlign: "center",
          my: 2,
          fontWeight: "bold",
          color: theme.palette.primary.main,
        }}
      >
        MitM Webserver
      </Typography>
      <List>
        {pages.map(({ name, path }) => (
          <ListItem key={name} disablePadding>
            <ListItemButton
              onClick={() => handleNavigate(path)}
              selected={location.pathname === path}
            >
              <ListItemText primary={name} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <>
      <AppBar position="fixed" color="primary" elevation={2}>
        <Toolbar>
          <IconButton color="inherit" edge="start" onClick={toggleDrawer(true)}>
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            component="div"
            sx={{ flexGrow: 1, fontWeight: "bold", cursor: "pointer" }}
            onClick={() => handleNavigate("/")}
          >
            MitM Webserver
          </Typography>
        </Toolbar>
      </AppBar>
      <Toolbar /> {/* spacing */}
      <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
        {drawerList}
      </Drawer>
    </>
  );
}