import { jsx } from 'react/jsx-runtime';
import { useRef, useCallback, useLayoutEffect } from 'react';
import { cn } from '../../../utils/cn.js';
import { useModalContext } from './Modal.js';

const ModalBody = ({ children, className, ...props }) => {
    const { theme, setIsBodyScrollable } = useModalContext();
    const bodyRef = useRef(null);
    // Function to check if content is scrollable
    const checkScrollable = useCallback(() => {
        if (bodyRef.current) {
            const { scrollHeight, clientHeight } = bodyRef.current;
            setIsBodyScrollable(scrollHeight > clientHeight);
        }
    }, [setIsBodyScrollable]);
    // Check scrollable state on layout changes
    useLayoutEffect(() => {
        checkScrollable();
    }, [checkScrollable, children]);
    // Set up resize observer to monitor content changes
    useLayoutEffect(() => {
        const element = bodyRef.current;
        if (!element)
            return;
        // Initial check
        checkScrollable();
        // Create ResizeObserver to watch for content changes
        const resizeObserver = new ResizeObserver(checkScrollable);
        resizeObserver.observe(element);
        // Also listen for window resize events
        window.addEventListener('resize', checkScrollable);
        return () => {
            resizeObserver.disconnect();
            window.removeEventListener('resize', checkScrollable);
        };
    }, [checkScrollable]);
    return (jsx("div", { ref: bodyRef, className: cn(theme.body, className), ...props, children: children }));
};
ModalBody.displayName = "Modal.Body";

export { ModalBody };
