// React imports
import { useState } from "react";
import { Link, useLocation } from "react-router-dom";

// Internal Imports
import pages from "./MCLPages.jsx";

// Materialui
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import MenuIcon from "@mui/icons-material/Menu";
import Drawer from "@mui/material/Drawer";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";

const drawerWidth = 250;
export default function MCLMenu() {
  const location = useLocation();
  const [drawerOpen, setDrawer] = useState(false);

  const toggleDrawer = () => setDrawer(!drawerOpen);
  const closeDrawer = () => setDrawer(false);

  const navHeader = () => {
    const name = location.pathname.split("/").pop();
    const pathStr = name.charAt(0).toUpperCase() + name.slice(1);
    return pathStr;
  };

  const drawerIndex = (isDrawer) => (theme) =>
    theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);

  return (
    <AppBar position="fixed" sx={{ bgcolor: "black", zIndex: drawerIndex() }}>
      <Box sx={{ flexGrow: 1, margin: "0 20px" }}>
        <Toolbar disableGutters>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            onClick={toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
          <Drawer
            open={drawerOpen}
            onClose={closeDrawer}
            sx={{ zIndex: drawerIndex(true) }}
          >
            <Toolbar />
            <Box
              sx={{ width: drawerWidth, overflow: "auto" }}
              role="presentation"
            >
              <List>
                {pages.map((page, index) => (
                  <ListItemButton
                    key={index}
                    component={Link}
                    to={page.path}
                    selected={location.pathname === page.path}
                    onClick={closeDrawer}
                  >
                    <ListItemIcon>{page.icon}</ListItemIcon>
                    <ListItemText primary={page.name} />
                  </ListItemButton>
                ))}
              </List>
            </Box>
          </Drawer>
          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
            {navHeader()}
          </Typography>
        </Toolbar>
      </Box>
    </AppBar>
  );
}