import { Grid, Paper, Typography } from "@mui/material";
import { PropsWithChildren } from "react";
import { validate as validateUUID } from "uuid";
import { ServerApi } from "../../api/ServerApi";
import { VMInfo } from "../../api/VMApi";
import { CheckboxInput } from "../forms/CheckboxInput";
import { SelectInput } from "../forms/SelectInput";
import { TextInput } from "../forms/TextInput";

export function VMDetails(p: {
  vm: VMInfo;
  editable: boolean;
  onChange?: () => void;
}): React.ReactElement {
  return (
    <Grid container spacing={2}>
      {/* Metadata section */}
      <EditSection title="Metadata">
        <TextInput
          label="Name"
          editable={p.editable}
          value={p.vm.name}
          onValueChange={(v) => {
            p.vm.name = v ?? "";
            p.onChange?.();
          }}
          size={ServerApi.Config.constraints.name_size}
        />

        <TextInput label="UUID" editable={false} value={p.vm.uuid} />

        <TextInput
          label="VM genid"
          editable={p.editable}
          value={p.vm.genid}
          onValueChange={(v) => {
            p.vm.genid = v;
            p.onChange?.();
          }}
          checkValue={(v) => validateUUID(v)}
        />

        <TextInput
          label="Title"
          editable={p.editable}
          value={p.vm.title}
          onValueChange={(v) => {
            p.vm.title = v;
            p.onChange?.();
          }}
          size={ServerApi.Config.constraints.title_size}
        />

        <TextInput
          label="Description"
          editable={p.editable}
          value={p.vm.description}
          onValueChange={(v) => {
            p.vm.description = v;
            p.onChange?.();
          }}
          multiline={true}
        />
      </EditSection>

      {/* General section */}
      <EditSection title="General">
        <SelectInput
          editable={p.editable}
          label="CPU Architecture"
          onValueChange={(v) => {
            p.vm.architecture = v! as any;
            p.onChange?.();
          }}
          value={p.vm.architecture}
          options={[
            { label: "i686", value: "i686" },
            { label: "x86_64", value: "x86_64" },
          ]}
        />

        <SelectInput
          editable={p.editable}
          label="Boot type"
          onValueChange={(v) => {
            p.vm.boot_type = v! as any;
            p.onChange?.();
          }}
          value={p.vm.boot_type}
          options={[
            { label: "UEFI with Secure Boot", value: "UEFISecureBoot" },
            { label: "UEFI", value: "UEFI" },
          ]}
        />

        <TextInput
          label="Memory (MB)"
          editable={p.editable}
          type="number"
          value={p.vm.memory.toString()}
          onValueChange={(v) => {
            p.vm.memory = Number(v ?? "0");
            p.onChange?.();
          }}
          checkValue={(v) =>
            Number(v) > ServerApi.Config.constraints.memory_size.min &&
            Number(v) < ServerApi.Config.constraints.memory_size.max
          }
        />

        <CheckboxInput
          editable={p.editable}
          label="Enable VNC access"
          checked={p.vm.vnc_access}
          onValueChange={(v) => {
            p.vm.vnc_access = v;
            p.onChange?.();
          }}
        />
      </EditSection>
    </Grid>
  );
}

function EditSection(
  p: { title: string } & PropsWithChildren
): React.ReactElement {
  return (
    <Grid item sm={12} md={6}>
      <Paper style={{ margin: "10px", padding: "10px" }}>
        <Typography variant="h5" style={{ marginBottom: "15px" }}>
          {p.title}
        </Typography>
        {p.children}
      </Paper>
    </Grid>
  );
}