import { mdiHarddisk } from "@mdi/js";
import { Icon } from "@mdi/react";
import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@mui/material";
import { filesize } from "filesize";
import { VMFileDisk } from "../../api/VMApi";
import { DiskBusSelect } from "../forms/DiskBusSelect";

export function VMDiskFileWidget(p: {
  editable?: boolean;
  disk: VMFileDisk;
  secondaryAction?: React.ReactElement;
  onChange?: () => void;
}): React.ReactElement {
  const info = [filesize(p.disk.size), p.disk.format];

  if (p.disk.format === "Raw") info.push(p.disk.is_sparse ? "Sparse" : "Fixed");

  if (!p.editable) info.push(p.disk.bus);

  return (
    <ListItem secondaryAction={p.secondaryAction}>
      <ListItemAvatar>
        <Avatar>
          <Icon path={mdiHarddisk} />
        </Avatar>
      </ListItemAvatar>
      <ListItemText
        primary={
          <>
            {p.disk.name}{" "}
            {p.disk.deleteType && (
              <span style={{ color: "red" }}>
                {p.disk.deleteType === "deletefile"
                  ? "Remove, DELETING block file"
                  : "Remove, keeping block file"}
              </span>
            )}
          </>
        }
        secondary={
          <div style={{ display: "flex", alignItems: "center" }}>
            {p.editable ? (
              <div
                style={{
                  maxWidth: "80px",
                  display: "inline-block",
                  marginRight: "10px",
                }}
              >
                <DiskBusSelect
                  onValueChange={(v) => {
                    p.disk.bus = v;
                    p.onChange?.();
                  }}
                  label=""
                  editable
                  value={p.disk.bus}
                  size="small"
                  disableUnderline
                  disableBottomMargin
                />
              </div>
            ) : (
              ""
            )}
            <div style={{ height: "100%" }}>{info.join(" - ")}</div>
          </div>
        }
      />
    </ListItem>
  );
}