import { useEffect, useRef } from 'react';

/**
 * requestAnimationFrame을 사용한 애니메이션 루프 훅
 * @param callback 매 프레임마다 호출될 콜백 (deltaTime을 인자로 받음)
 * @param isPlaying 애니메이션 재생 여부
 */
export const useAnimationFrame = (
  callback: (deltaTime: number) => void,
  isPlaying: boolean = true
) => {
  const requestRef = useRef<number | undefined>(undefined);
  const previousTimeRef = useRef<number | undefined>(undefined);

  useEffect(() => {
    if (!isPlaying) return;

    const animate = (time: number) => {
      if (previousTimeRef.current !== undefined) {
        const deltaTime = (time - previousTimeRef.current) / 1000; // 밀리초를 초로 변환
        callback(deltaTime);
      }
      previousTimeRef.current = time;
      requestRef.current = requestAnimationFrame(animate);
    };

    requestRef.current = requestAnimationFrame(animate);

    return () => {
      if (requestRef.current) {
        cancelAnimationFrame(requestRef.current);
      }
    };
  }, [callback, isPlaying]);
};