import { mdiIp } from "@mdi/js";
import Icon from "@mdi/react";
import DeleteIcon from "@mui/icons-material/Delete";
import {
  Avatar,
  Button,
  IconButton,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Paper,
  Tooltip,
  Typography,
} from "@mui/material";
import { DHCPConfig, DHCPHost } from "../../api/NetworksApi";
import { ServerApi } from "../../api/ServerApi";
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { IPInput } from "./IPInput";
import { MACInput } from "./MACInput";
import { TextInput } from "./TextInput";
import Grid from "@mui/material/Grid2";

export function NetDHCPHostReservations(p: {
  editable: boolean;
  dhcp: DHCPConfig;
  version: 4 | 6;
  onChange?: (d: DHCPConfig) => void;
}): React.ReactElement {
  const addHost = () => {
    p.dhcp.hosts.push({
      ip: p.version === 4 ? "192.168.1.30" : "fd00::b200",
      name: "host",
      mac: p.version === 4 ? "00:00:00:00:00:00" : undefined,
    });
    p.onChange?.(p.dhcp);
  };

  return (
    <>
      <Grid container>
        {p.dhcp.hosts.map((h, num) => (
          <Grid key={num} size={{ sm: 12, md: 6 }} style={{ padding: "10px" }}>
            <HostReservationWidget
              key={num}
              {...p}
              onChange={() => {
                p.onChange?.(p.dhcp);
              }}
              host={h}
              onRemove={() => {
                p.dhcp.hosts.splice(num, 1);
                p.onChange?.(p.dhcp);
              }}
            />
          </Grid>
        ))}
      </Grid>
      {p.dhcp.hosts.length === 0 && (
        <Typography style={{ textAlign: "center" }}>
          You have not set any DHCP host reservations.
        </Typography>
      )}
      {p.editable && (
        <Button onClick={addHost}>Add new host reservation</Button>
      )}
    </>
  );
}

function HostReservationWidget(p: {
  editable: boolean;
  host: DHCPHost;
  version: 4 | 6;
  onChange: () => void;
  onRemove: () => void;
}): React.ReactElement {
  const confirm = useConfirm();
  const deleteReservation = async () => {
    if (
      !(await confirm("Do you really want to remove this host IP reservation?"))
    )
      return;

    p.onRemove();
  };

  return (
    <Paper elevation={3} style={{ padding: "20px", marginBottom: "20px" }}>
      <ListItem
        secondaryAction={
          p.editable && (
            <IconButton
              edge="end"
              aria-label="remove network"
              onClick={deleteReservation}
            >
              <Tooltip title="Remove host IP allocation">
                <DeleteIcon />
              </Tooltip>
            </IconButton>
          )
        }
      >
        <ListItemAvatar>
          <Avatar>
            <Icon path={mdiIp} />
          </Avatar>
        </ListItemAvatar>
        <ListItemText
          primary={
            <TextInput
              editable={p.editable}
              label="Host name"
              value={p.host.name}
              onValueChange={(v) => {
                p.host.name = v!;
                p.onChange();
              }}
              type="text"
              size={ServerApi.Config.constraints.dhcp_reservation_host_name}
            />
          }
        />
      </ListItem>
      <div style={{ marginLeft: "70px" }}>
        {p.version === 4 && (
          <MACInput
            editable={p.editable}
            label="MAC Address"
            value={p.host.mac}
            onValueChange={(v) => {
              p.host.mac = v!;
              p.onChange?.();
            }}
          />
        )}

        <IPInput
          editable={p.editable}
          label="IP address"
          version={p.version}
          value={p.host.ip}
          onValueChange={(v) => {
            p.host.ip = v!;
            p.onChange?.();
          }}
        />
      </div>
    </Paper>
  );
}