import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, } from "react";
import { TransitionAnimationTypes } from "../Transition";
import UncontrolledTransition from "../UncontrolledTransition";
import Styles from "./AdaptiveContainer.module.scss";
/**
 * A container that smoothly animates size changes when content updates.
 *
 * This component wraps your content and makes transitions between different
 * content sizes look polished by animating the width, height, or both dimensions.
 * It's like giving your UI a gentle, professional feel when content changes.
 **/
export default function AdaptiveContainer({ children, className = "", containerElement: _Wrapper = "div", direction = "h", strict = true, ...otherProps }) {
    const animatedProperty = useMemo(() => {
        if (!strict && direction !== "v")
            throw new Error(`Strict false only works with direction "v" at the moment`);
        switch (direction) {
            case "both":
                return ["width", "height"];
            case "h":
                return "width";
            case "v":
                return strict ? "height" : "minHeight";
        }
    }, [direction, strict]);
    const uncontrolledRef = useRef(null);
    const buttonRef = useRef(null);
    useEffect(() => {
        const transitionContainer = uncontrolledRef.current.sectionRef.current;
        if (transitionContainer)
            if (direction === "both") {
                transitionContainer.style.width = `${transitionContainer.clientWidth}px`;
                transitionContainer.style.height = `${transitionContainer.clientHeight}px`;
            }
            else if (direction === "h") {
                transitionContainer.style.width = `${transitionContainer.clientWidth}px`;
                transitionContainer.style.height = transitionContainer.clientHeight
                    ? `${transitionContainer.clientHeight}px`
                    : ``;
            }
            else {
                transitionContainer.style[animatedProperty] =
                    `${transitionContainer.clientHeight}px`;
                transitionContainer.style.width = ``;
            }
        const t = setTimeout(() => {
            if (uncontrolledRef.current) {
                const transitionContainer = uncontrolledRef.current.sectionRef.current;
                if (transitionContainer) {
                    const screenThatWillEnter = transitionContainer.lastChild;
                    if (screenThatWillEnter) {
                        function resetFactory(param, target) {
                            const resetPropertyInstance = (e) => {
                                if (e.propertyName !== param)
                                    return;
                                setTimeout(() => {
                                    if (transitionContainer?.style[param] === `${target}px`) {
                                        transitionContainer.style[param] = "";
                                    }
                                }, 100);
                                if (transitionContainer)
                                    transitionContainer.removeEventListener("transitionend", resetPropertyInstance);
                            };
                            return resetPropertyInstance;
                        }
                        if (direction === "both") {
                            const contentSize = {
                                width: screenThatWillEnter.clientWidth,
                                height: screenThatWillEnter.scrollHeight,
                            };
                            const targetSize = {
                                width: `${contentSize.width}px`,
                                height: `${contentSize.height}px`,
                            };
                            const prevSize = {
                                width: transitionContainer.style.width,
                                height: transitionContainer.style.height,
                            };
                            transitionContainer.style.width = targetSize.width;
                            transitionContainer.style.height = targetSize.height;
                            if (Array.isArray(animatedProperty))
                                for (let prop of animatedProperty) {
                                    const resetProperty = resetFactory(prop, contentSize[prop]);
                                    if (targetSize[prop] === prevSize[prop])
                                        resetProperty({ propertyName: prop });
                                    else
                                        transitionContainer.addEventListener("transitionend", resetProperty);
                                }
                        }
                        else if (direction === "h") {
                            const contentWidth = screenThatWillEnter.clientWidth;
                            const targetWidth = `${contentWidth}px`;
                            const prevWidth = transitionContainer.style.width;
                            transitionContainer.style.width = targetWidth;
                            const func = resetFactory("width", contentWidth);
                            if (targetWidth === prevWidth)
                                func({ propertyName: "width" });
                            else
                                transitionContainer.addEventListener("transitionend", func);
                        }
                        else {
                            const _animatedProperty = animatedProperty;
                            const contentHeight = screenThatWillEnter.scrollHeight;
                            const targetHeight = `${contentHeight}px`;
                            const prevHeight = transitionContainer.style[_animatedProperty];
                            transitionContainer.style[_animatedProperty] = targetHeight;
                            const resetProperty = resetFactory(_animatedProperty, contentHeight);
                            if (targetHeight === prevHeight)
                                resetProperty({ propertyName: _animatedProperty });
                            else
                                transitionContainer.addEventListener("transitionend", resetProperty);
                        }
                    }
                }
            }
        }, 100);
        return () => clearTimeout(t);
    }, [children.key, direction]);
    const Wrapper = _Wrapper;
    const directionClass = direction in Styles ? Styles[direction] : "";
    const { contentClassName, ...spreadProps } = otherProps;
    return (_jsx(_Fragment, { children: _jsx(Wrapper, { className: `${className}`, ref: buttonRef, ...spreadProps, children: _jsx(UncontrolledTransition, { ref: uncontrolledRef, transitionType: TransitionAnimationTypes.CUSTOM, lockTransitionWidth: false, config: {
                    backward: {
                        elementExiting: Styles.fadeOutAbsolute,
                        elementEntering: Styles.fadeInDelayed,
                    },
                    forward: {
                        elementExiting: Styles.fadeOutAbsolute,
                        elementEntering: Styles.fadeInDelayed,
                    },
                }, className: `${Styles.resetSection} ${directionClass}`, contentClassName: otherProps.contentClassName, children: children }) }) }));
}
//# sourceMappingURL=AdaptiveContainer.js.map