import { Alert, CircularProgress, Typography } from "@mui/material";
import { VMApi, VMInfo } from "../../api/VMApi";
import { AsyncWidget } from "../AsyncWidget";
import React from "react";
import { CheckboxInput } from "./CheckboxInput";
import { useAlert } from "../../hooks/providers/AlertDialogProvider";
import { useSnackbar } from "../../hooks/providers/SnackbarProvider";

export function VMAutostartInput(p: {
  editable: boolean;
  vm: VMInfo;
}): React.ReactElement {
  const alert = useAlert();
  const snackbar = useSnackbar();

  const [enabled, setEnabled] = React.useState<boolean | undefined>();

  const load = async () => {
    setEnabled(await VMApi.IsAutostart(p.vm));
  };

  const update = async (enabled: boolean) => {
    try {
      await VMApi.SetAutostart(p.vm, enabled);
      snackbar("Autostart status successfully updated!");
      setEnabled(enabled);
    } catch (e) {
      console.error(e);
      alert("Failed to update autostart status of the VM!");
    }
  };

  return (
    <AsyncWidget
      loadKey={p.vm.uuid}
      load={load}
      errMsg="Failed to check autostart status of the VM!"
      buildLoading={() => (
        <Typography>
          <CircularProgress size={"1rem"} /> Checking for autostart
        </Typography>
      )}
      buildError={(e: string) => <Alert severity="error">{e}</Alert>}
      build={() => (
        <VMAutostartInputInner
          editable={p.editable}
          enabled={enabled!}
          setEnabled={update}
        />
      )}
    />
  );
}

function VMAutostartInputInner(p: {
  editable: boolean;
  enabled: boolean;
  setEnabled: (b: boolean) => void;
}): React.ReactElement {
  return (
    <div>
      <CheckboxInput
        editable={p.editable}
        checked={p.enabled}
        label="Autostart VM"
        onValueChange={p.setEnabled}
      />
    </div>
  );
}