import { useEffect, useMemo, useRef, useState } from 'react';
export const usePatchAnimateHeight = ({ containerRef, contentRef, duration, open })=>{
    const browserSupportsKeywordAnimation = useMemo(()=>typeof CSS !== 'undefined' && CSS && CSS.supports ? CSS.supports('interpolate-size', 'allow-keywords') : false, []);
    const hasInitialized = useRef(false);
    const previousOpenState = useRef(open);
    const [isAnimating, setIsAnimating] = useState(false);
    const resizeObserverRef = useRef(null);
    useEffect(()=>{
        const container = containerRef.current;
        const content = contentRef.current;
        if (!container || !content || browserSupportsKeywordAnimation) {
            return;
        }
        const setContainerHeight = (height)=>{
            container.style.height = height;
        };
        const handleTransitionEnd = ()=>{
            if (container) {
                container.style.transition = '';
                container.style.height = open ? 'auto' : '0px';
                setIsAnimating(false);
            }
        };
        const animate = ()=>{
            if (!hasInitialized.current && open) {
                // Skip animation on first render
                setContainerHeight('auto');
                setIsAnimating(false);
                return;
            }
            hasInitialized.current = true;
            if (previousOpenState.current !== open) {
                setContainerHeight(open ? '0px' : `${content.scrollHeight}px`);
            }
            // Trigger reflow
            container.offsetHeight;
            // eslint-disable-line @typescript-eslint/no-unused-expressions
            setIsAnimating(true);
            container.style.transition = `height ${duration}ms ease`;
            setContainerHeight(open ? `${content.scrollHeight}px` : '0px');
            const onTransitionEnd = ()=>{
                handleTransitionEnd();
                container.removeEventListener('transitionend', onTransitionEnd);
            };
            container.addEventListener('transitionend', onTransitionEnd);
        };
        animate();
        previousOpenState.current = open;
        // Setup ResizeObserver
        resizeObserverRef.current = new ResizeObserver(()=>{
            if (isAnimating) {
                container.style.height = open ? `${content.scrollHeight}px` : '0px';
            }
        });
        resizeObserverRef.current.observe(content);
        return ()=>{
            if (container) {
                container.style.transition = '';
                container.style.height = '';
            }
            resizeObserverRef.current?.disconnect();
        };
    }, [
        open,
        duration,
        containerRef,
        contentRef,
        browserSupportsKeywordAnimation
    ]);
    return {
        browserSupportsKeywordAnimation
    };
};

//# sourceMappingURL=usePatchAnimateHeight.js.map