import gsap from "gsap";
import { useEffect, useRef } from "react";
import { useCurrentFrame, useVideoConfig } from "remotion";

export const useGsapTimeline = (gsapTimelineFactory) => {

  const animationScopeRef = useRef(null);
  const timelineRef = useRef();
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  useEffect(() => {
    if (animationScopeRef.current) // check if the component is mounted
    {
      const ctx = gsap.context(() => {
        timelineRef.current = gsapTimelineFactory();
        timelineRef.current.pause();
      }, animationScopeRef);
      return () => ctx.revert();
    }

  }, [animationScopeRef.current]);

  useEffect(() => {
    if (animationScopeRef.current) // check if the component is mounted
    if (timelineRef.current) {
      timelineRef.current.seek((frame) / fps);
    }
  }, [frame, fps,animationScopeRef.current]);

  return animationScopeRef;
};