import { useEffect, useRef } from "react";
import { useGetVideoFeed } from "./useGetVideoFeed";

export const useCreateVideoSnapshot = () => {
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
  const { videoQuery } = useGetVideoFeed();

  const snapShot = videoQuery?.data;

  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 };
};