import React from "react";
import { GroupApi } from "../api/GroupApi";
import { VMGroup } from "../api/ServerApi";
import { VMApi, VMInfo } from "../api/VMApi";
import { useToast } from "../hooks/providers/ToastProvider";

export function VMLiveScreenshot(p: {
  vm: VMInfo;
  group?: VMGroup;
}): React.ReactElement {
  const toast = useToast();

  const [screenshotURL, setScreenshotURL] = React.useState<
    string | undefined
  >();

  const int = React.useRef<number | undefined>();

  React.useEffect(() => {
    const refresh = async () => {
      try {
        const screenshot = p.group
          ? await GroupApi.ScreenshotVM(p.group, p.vm)
          : await VMApi.Screenshot(p.vm);
        const u = URL.createObjectURL(screenshot);
        setScreenshotURL(u);
      } catch (e) {
        console.error(e);
        toast(p.vm.name, "Failed to get a screenshot of the VM!", "error");
      }
    };

    if (int.current === undefined) {
      refresh();
      int.current = setInterval(() => refresh(), 5000);
    }

    return () => {
      if (int.current !== undefined) {
        clearInterval(int.current);
        int.current = undefined;
      }
    };
  }, [p.vm, toast]);

  return (
    <img src={screenshotURL} style={{ width: "100%" }} alt="VM screenshot" />
  );
}