import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useCallback, useLayoutEffect, useState } from 'react';
import { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';
const getScrollSize = (el, dimension) => {
    if (!el)
        return '';
    return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;
};
const getStyle = (props) => {
    const { status, dimension, transitionSpeed, transitionTimingFunction, min, max, nullWhenCollapsed, el } = props;
    const style = {};
    let maxSize = max;
    if (el && !max) {
        maxSize = getScrollSize(el, dimension);
    }
    if (status === 'expanded' || status === 'collapsed') {
        if (max || min) {
            style[dimension] = status === 'expanded' ? maxSize : min || 0;
            style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';
        }
        if (status === 'collapsed' && !nullWhenCollapsed && !min) {
            style[dimension] = 0;
            style.overflow = 'hidden';
            style.visibility = 'hidden';
        }
    }
    if (status === 'expanding' || status === 'collapsing') {
        style[dimension] = status === 'expanding' ? maxSize : min || 0;
        style.overflow = 'hidden';
        style.transitionProperty = dimension;
        style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;
        style.transitionTimingFunction = transitionTimingFunction;
    }
    return style;
};
const ExpandCollapse = forwardRef(function ExpandCollapse(props, refArg) {
    const { base: { animation: themeAnimation } } = useTheme();
    const { children, dimension = 'height', collapsed = false, onBeforeExpand, onAfterExpand, onBeforeCollapse, onAfterCollapse, transitionSpeed = themeAnimation.speed, min, max, nullWhenCollapsed = false, as: Tag = 'div', ...restProps } = props;
    const [status, setStatus] = useState(collapsed ? 'collapsed' : 'expanded');
    const styleStateHook = useState();
    const setStyle = styleStateHook[1];
    let style = styleStateHook[0];
    const previousStatus = usePrevious(status);
    const ref = useConsolidatedRef(refArg);
    const onTransitionEnd = useCallback((e) => {
        if (e.target !== ref.current || e.propertyName !== dimension)
            return;
        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');
    }, [ref.current, status]);
    useLayoutEffect(() => {
        const wantsToCollapse = collapsed;
        const wantsToExpand = !collapsed;
        const canCollapse = ['expanded', 'expanding'].includes(status);
        const canExpand = ['collapsed', 'collapsing'].includes(status);
        if (wantsToExpand && canExpand) {
            onBeforeExpand?.();
            setStatus('expanding');
        }
        else if (wantsToCollapse && canCollapse) {
            onBeforeCollapse?.();
            setStatus('collapsing');
        }
        if (status === 'expanded' && previousStatus !== 'expanded') {
            onAfterExpand?.();
        }
        else if (status === 'collapsed' && previousStatus !== 'collapsed') {
            onAfterCollapse?.();
        }
        setStyle(getStyle({
            dimension,
            min,
            max,
            transitionSpeed,
            nullWhenCollapsed,
            status,
            el: ref.current,
            transitionTimingFunction: themeAnimation.timing.ease
        }));
    }, [collapsed, status, min, max]);
    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus)) {
        style = getStyle({
            dimension,
            min,
            max,
            transitionSpeed,
            nullWhenCollapsed,
            status: status === 'expanding' ? 'collapsing' : 'expanding',
            el: ref.current,
            transitionTimingFunction: themeAnimation.timing.ease
        });
    }
    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, inert: status === 'collapsed' && !nullWhenCollapsed && !min ? '' : undefined, style: style, children: children }));
});
export default ExpandCollapse;
//# sourceMappingURL=ExpandCollapse.js.map