import Editor from "@monaco-editor/react";
import RefreshIcon from "@mui/icons-material/Refresh";
import { Grid, IconButton, InputAdornment, Tooltip } from "@mui/material";
import { v4 as uuidv4 } from "uuid";
import { VMInfo } from "../../api/VMApi";
import { CheckboxInput } from "./CheckboxInput";
import { EditSection } from "./EditSection";
import { SelectInput } from "./SelectInput";
import { TextInput } from "./TextInput";

interface CloudInitProps {
  vm: VMInfo;
  onChange?: () => void;
  editable: boolean;
}

export function CloudInitEditor(p: CloudInitProps): React.ReactElement {
  return (
    <>
      <EditSection>
        {/* Attach cloud init disk */}
        <CheckboxInput
          {...p}
          label="Attach Cloud Init disk"
          checked={p.vm.cloud_init.attach_config}
          onValueChange={(v) => {
            p.vm.cloud_init.attach_config = v;
            p.onChange?.();
          }}
        />
      </EditSection>
      <Grid container spacing={2}>
        <CloudInitMetadata
          {...p}
          editable={p.editable && p.vm.cloud_init.attach_config}
        />
        <CloudInitRawUserData
          {...p}
          editable={p.editable && p.vm.cloud_init.attach_config}
        />
      </Grid>
    </>
  );
}

function CloudInitMetadata(p: CloudInitProps): React.ReactElement {
  // Regenerate instance id
  const reGenerateInstanceId = () => {
    p.vm.cloud_init.instance_id = uuidv4();
    p.onChange?.();
  };

  return (
    <EditSection title="Metadata">
      {/* Instance ID */}
      <TextInput
        {...p}
        label="Instance ID"
        value={p.vm.cloud_init.instance_id}
        onValueChange={(v) => {
          p.vm.cloud_init.instance_id = v;
          p.onChange?.();
        }}
        endAdornment={
          p.editable ? (
            <InputAdornment position="end">
              <Tooltip title="Generate a new instance ID">
                <IconButton onClick={reGenerateInstanceId}>
                  <RefreshIcon />
                </IconButton>
              </Tooltip>
            </InputAdornment>
          ) : (
            <></>
          )
        }
      />

      {/* Instance hostname */}
      <TextInput
        {...p}
        label="Local hostname"
        value={p.vm.cloud_init.local_hostname}
        onValueChange={(v) => {
          p.vm.cloud_init.local_hostname = v;
          p.onChange?.();
        }}
      />

      {/* Data source mode */}
      <SelectInput
        {...p}
        label="Data source mode"
        value={p.vm.cloud_init.dsmode}
        onValueChange={(v) => {
          p.vm.cloud_init.dsmode = v as any;
          p.onChange?.();
        }}
        options={[
          { label: "None", value: undefined },
          { value: "Net" },
          { value: "Local" },
        ]}
      />
    </EditSection>
  );
}

function CloudInitRawUserData(p: CloudInitProps): React.ReactElement {
  return (
    <EditSection title="User data">
      <Editor
        theme="vs-dark"
        options={{
          readOnly: !p.editable,
          quickSuggestions: { other: true, comments: true, strings: true },
        }}
        language="yaml"
        height={"30vh"}
        value={p.vm.cloud_init.user_data}
        onChange={(v) => {
          p.vm.cloud_init.user_data = v ?? "";
          p.onChange?.();
        }}
      />
    </EditSection>
  );
}