import { useEffect, useRef, useState } from 'react';

/**
 * Hook that triggers visibility when element enters viewport
 * Uses Intersection Observer for performance
 */
export function useScrollAnimation<T extends HTMLElement = HTMLDivElement>(
    threshold = 0.1
) {
    const ref = useRef<T>(null);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const element = ref.current;
        if (!element) return;

        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    // Once visible, stop observing
                    observer.unobserve(element);
                }
            },
            { threshold }
        );

        observer.observe(element);

        return () => observer.disconnect();
    }, [threshold]);

    return { ref, isVisible };
}

/**
 * Hook that manages multiple scroll animations
 */
export function useMultipleScrollAnimations(count: number, threshold = 0.1) {
    const [visibleItems, setVisibleItems] = useState<boolean[]>(
        new Array(count).fill(false)
    );
    const refs = useRef<(HTMLElement | null)[]>([]);

    useEffect(() => {
        const observers: IntersectionObserver[] = [];

        refs.current.forEach((element, index) => {
            if (!element) return;

            const observer = new IntersectionObserver(
                ([entry]) => {
                    if (entry.isIntersecting) {
                        setVisibleItems((prev) => {
                            const next = [...prev];
                            next[index] = true;
                            return next;
                        });
                        observer.unobserve(element);
                    }
                },
                { threshold }
            );

            observer.observe(element);
            observers.push(observer);
        });

        return () => observers.forEach((o) => o.disconnect());
    }, [count, threshold]);

    const setRef = (index: number) => (el: HTMLElement | null) => {
        refs.current[index] = el;
    };

    return { setRef, visibleItems };
}