import {
  mdiApi,
  mdiBoxShadow,
  mdiDisc,
  mdiHome,
  mdiInformation,
  mdiLan,
  mdiSecurityNetwork,
} from "@mdi/js";
import Icon from "@mdi/react";
import {
  Box,
  List,
  ListItemButton,
  ListItemIcon,
  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: "200px",
            backgroundColor: "background.paper",
          }}
        >
          <NavLink
            label="Home"
            uri="/"
            icon={<Icon path={mdiHome} size={1} />}
          />
          <NavLink
            label="Virtual Machines"
            uri="/vms"
            icon={<Icon path={mdiBoxShadow} size={1} />}
          />
          <NavLink
            label="Networks"
            uri="/net"
            icon={<Icon path={mdiLan} size={1} />}
          />
          <NavLink
            label="Network filters"
            uri="/nwfilter"
            icon={<Icon path={mdiSecurityNetwork} size={1} />}
          />
          <NavLink
            label="ISO files"
            uri="/iso"
            icon={<Icon path={mdiDisc} size={1} />}
          />
          <NavLink
            label="API tokens"
            uri="/tokens"
            icon={<Icon path={mdiApi} size={1} />}
          />
          <NavLink
            label="Sysinfo"
            uri="/sysinfo"
            icon={<Icon path={mdiInformation} size={1} />}
          />
        </List>
        <div style={{ flex: 1 }}>
          <Outlet />
        </div>
      </Box>
    </Box>
  );
}

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