import {
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  SelectChangeEvent,
} from "@mui/material";
import React from "react";
import { DiskImage } from "../../api/DiskImageApi";
import { FileDiskImageWidget } from "../FileDiskImageWidget";

/**
 * Select a disk image
 */
export function DiskImageSelect(p: {
  label: string;
  value?: string;
  onValueChange: (image: string | undefined) => void;
  list: DiskImage[];
}): React.ReactElement {
  const handleChange = (event: SelectChangeEvent) => {
    p.onValueChange(event.target.value);
  };

  return (
    <FormControl fullWidth variant="standard">
      <InputLabel>{p.label}</InputLabel>
      <Select value={p.value} label={p.label} onChange={handleChange}>
        <MenuItem value={undefined}>
          <i>None</i>
        </MenuItem>
        {p.list.map((d) => (
          <MenuItem key={d.file_name} value={d.file_name}>
            <FileDiskImageWidget image={d} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}