import { Button, Toolbar, Tooltip } from "@fluentui/react-components";
import { PlayRegular } from "@fluentui/react-icons";
import { VMGroup } from "../api/ServerApi";
import { VMInfo, VMState } from "../api/VMApi";

export function GroupVMAction(p: {
  group: VMGroup;
  state?: VMState;
  vm?: VMInfo;
}): React.ReactElement {
  return (
    <Toolbar>
      <GroupVMButton
        enabled={p.group.can_start}
        icon={<PlayRegular />}
        tooltip="Start"
        group={p.group}
        vm={p.vm}
        allowedStates={["Shutdown", "Shutoff", "Crashed"]}
        currState={p.state}
        needConfirm={false}
        action={async () => {}}
      />
    </Toolbar>
  );
}

function GroupVMButton(p: {
  enabled: boolean;
  icon: React.ReactElement;
  action: (group: VMGroup, vm?: VMGroup) => Promise<void>;
  tooltip: string;
  currState?: VMState;
  allowedStates: VMState[];
  group: VMGroup;
  vm?: VMInfo;
  needConfirm: boolean;
}): React.ReactElement {
  const process = () => {};

  const allowed =
    !p.vm || (p.currState && p.allowedStates.includes(p.currState));

  if (!p.enabled) return <></>;

  return (
    <Tooltip
      content={`${p.tooltip} ${
        p.vm ? `the VM ${p.vm.name}` : `all the VM of the group ${p.group.id}`
      }`}
      relationship="description"
      withArrow
    >
      <Button
        icon={p.icon}
        onClick={process}
        disabled={!allowed}
        appearance="subtle"
      />
    </Tooltip>
  );
}