import { useState, useRef, useLayoutEffect, ReactNode } from 'react';
import { motion } from 'framer-motion';
import { useAtomValue } from 'jotai';
import { DrawerIsOpeningAtom, ScreenIsAnimatingAtom } from '../atoms';

export function SmoothHeight({ children }: { children: ReactNode }) {
    const [height, setHeight] = useState<number | 'auto'>('auto');
    const contentRef = useRef<HTMLDivElement>(null);
    const screenIsAnimating = useAtomValue(ScreenIsAnimatingAtom)
    const drawerIsOpening = useAtomValue(DrawerIsOpeningAtom)

    let instant = screenIsAnimating || drawerIsOpening

    useLayoutEffect(() => {
        if (!contentRef.current) return;
        const observer = new ResizeObserver(([entry]) => setHeight(entry.contentRect.height));
        observer.observe(contentRef.current);
        return () => observer.disconnect();
    }, []);

    return (
        <motion.div
            animate={{ height }}
            transition={instant ? { duration: 0 } : { duration: .35, ease: [0.25, 1, 0.5, 1] }}
            style={{ overflow: 'hidden', willChange: 'height' }}
            className="w-full"
        >
            <div ref={contentRef}>{children}</div>
        </motion.div>
    );
}