import { mdiDisc, mdiHome, mdiLanPending } from "@mdi/js";
import Icon from "@mdi/react";
import {
  Box,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemSecondaryAction,
  ListItemText,
} from "@mui/material";
import { Outlet, useLocation } from "react-router-dom";
import { RouterLink } from "./RouterLink";
import { VirtWebAppBar } from "./VirtWebAppBar";

export function BaseAuthenticatedPage(): React.ReactElement {
  return (
    <Box
      component="div"
      sx={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        backgroundColor: (theme) => theme.palette.grey[900],
        color: (theme) => theme.palette.grey[100],
      }}
    >
      <VirtWebAppBar />
      <Box
        sx={{
          display: "flex",
          flex: "2",
        }}
      >
        <List
          dense
          component="nav"
          sx={{
            minWidth: "180px",
            backgroundColor: "background.paper",
          }}
        >
          <NavLink
            label="Home"
            uri="/"
            icon={<Icon path={mdiHome} size={1} />}
          />
          <NavLink
            label="Networks"
            uri="/networks"
            icon={<Icon path={mdiLanPending} size={1} />}
          />
          <NavLink
            label="ISO files"
            uri="/iso"
            icon={<Icon path={mdiDisc} size={1} />}
          />
        </List>
        <div style={{ flex: 1 }}>
          <Outlet />
        </div>
      </Box>
    </Box>
  );
}

function NavLink(p: {
  icon: React.ReactElement;
  uri: string;
  label: string;
  secondaryAction?: React.ReactElement;
}): React.ReactElement {
  const location = useLocation();
  return (
    <RouterLink to={p.uri}>
      <ListItemButton selected={p.uri === location.pathname}>
        <ListItemIcon>{p.icon}</ListItemIcon>
        <ListItemText primary={p.label} />
        {p.secondaryAction && (
          <ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
        )}
      </ListItemButton>
    </RouterLink>
  );
}