import { useQuery } from "@tanstack/react-query";
import { useRef } from "react";

const apiUrl = import.meta.env.VITE_BASEURL;

async function fetchOverviewImage(cameraSide: string) {
  const response = await fetch(`${apiUrl}${cameraSide}-preview`);
  if (!response.ok) throw new Error("could not fetch overview image");
  return response.blob();
}

export function useOverviewVideo() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const { isPending, isError, data } = useQuery({
    queryKey: ["overviewVideo"],
    queryFn: () => fetchOverviewImage("CameraFront"),
    refetchInterval: 500,
  });

  if (isPending) return;

  if (isError) return;

  const img = new Image();
  const imgUrl = URL.createObjectURL(data);
  img.src = imgUrl;

  const canvas = canvasRef.current;
  if (!canvas) return;
  const ctx = canvas.getContext("2d");

  ctx?.drawImage(img, 0, 0);
}