import VisibilityIcon from "@mui/icons-material/Visibility";
import {
  Button,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
} from "@mui/material";
import { filesize } from "filesize";
import React from "react";
import { useNavigate } from "react-router-dom";
import { VMApi, VMInfo } from "../api/VMApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { RouterLink } from "../widgets/RouterLink";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";

export function VMListRoute(): React.ReactElement {
  const [list, setList] = React.useState<VMInfo[] | undefined>();

  const loadKey = React.useRef(1);

  const load = async () => {
    setList(await VMApi.GetList());
  };

  const reload = () => {
    loadKey.current += 1;
    setList(undefined);
  };

  return (
    <AsyncWidget
      loadKey={loadKey.current}
      errMsg="Failed to load Virtual Machines list!"
      load={load}
      ready={list !== undefined}
      build={() => (
        <VirtWebRouteContainer
          label="Virtual Machines"
          actions={
            <>
              <RouterLink to="/vms/new">
                <Button>New</Button>
              </RouterLink>
            </>
          }
        >
          <VMListWidget list={list!} onReload={reload} />
        </VirtWebRouteContainer>
      )}
    />
  );
}

function VMListWidget(p: {
  list: VMInfo[];
  onReload: () => void;
}): React.ReactElement {
  const navigate = useNavigate();

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Description</TableCell>
            <TableCell>Memory</TableCell>
            <TableCell>Status</TableCell>
            <TableCell>Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {p.list.map((row) => (
            <TableRow
              hover
              key={row.name}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              onDoubleClick={() => navigate(row.ViewURL)}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell>{row.description ?? ""}</TableCell>
              <TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell>
              <TableCell>
                <VMStatusWidget vm={row} />
              </TableCell>
              <TableCell>
                <Tooltip title="View this VM">
                  <RouterLink to={row.ViewURL}>
                    <IconButton>
                      <VisibilityIcon />
                    </IconButton>
                  </RouterLink>
                </Tooltip>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}