import {
  mdiChip,
  mdiElectricSwitch,
  mdiHome,
  mdiMonitorArrowDown,
  mdiNewBox,
  mdiNotebookMultiple,
} from "@mdi/js";
import Icon from "@mdi/react";
import {
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
} from "@mui/material";
import { useLocation } from "react-router-dom";
import { RouterLink } from "./RouterLink";

export function SolarEnergyNavList(): React.ReactElement {
  return (
    <List
      dense
      component="nav"
      sx={{
        minWidth: "200px",
        backgroundColor: "background.paper",
      }}
    >
      <NavLink label="Home" uri="/" icon={<Icon path={mdiHome} size={1} />} />
      <NavLink
        label="Devices"
        uri="/devices"
        icon={<Icon path={mdiChip} size={1} />}
      />
      <NavLink
        label="Pending devices"
        uri="/pending_devices"
        icon={<Icon path={mdiNewBox} size={1} />}
      />
      <NavLink
        label="Relays"
        uri="/relays"
        icon={<Icon path={mdiElectricSwitch} size={1} />}
      />
      <NavLink
        label="OTA"
        uri="/ota"
        icon={<Icon path={mdiMonitorArrowDown} size={1} />}
      />
      <NavLink
        label="Logging"
        uri="/logs"
        icon={<Icon path={mdiNotebookMultiple} size={1} />}
      />
    </List>
  );
}

function NavLink(
  p: Readonly<{
    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} />
      </ListItemButton>
    </RouterLink>
  );
}