import { useEffect, useRef } from "react";
import { useGetVideoFeed } from "./useGetVideoFeed";
import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";

export const useCreateVideoSnapshot = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state?.cameraFeedID;
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
  const { videoQuery } = useGetVideoFeed(cameraFeedID);

  const snapShot = videoQuery?.data;
  const isloading = videoQuery.isPending;

  useEffect(() => {
    async function createBitmap() {
      if (!snapShot) return;

      try {
        const bitmap = await createImageBitmap(snapShot);
        if (!bitmap) return;
        latestBitmapRef.current = bitmap;
      } catch (error) {
        console.log(error);
      }
    }
    createBitmap();
  }, [snapShot]);

  return { latestBitmapRef, isloading };
};