import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
import Transition from "../Transition";
function _UncontrolledTransition({ className = "", contentClassName, children = _jsx(React.Fragment, {}, "default"), lockTransitionWidth = true, lockTransitionHeight = false, contentStyle, onDiscardStep, ...props }, ref) {
    const sectionRef = useRef(null);
    const [{ childStack, offset }, setChildStack] = useState(() => ({
        childStack: [{ ...children, createdAt: Date.now() }],
        offset: 1,
    }));
    const orientation = useRef("forward");
    function setOrientation(a) {
        orientation.current = a;
    }
    useImperativeHandle(ref, () => ({
        setOrientation,
        sectionRef,
    }), []);
    useLayoutEffect(() => {
        if (process.env.NODE_ENV !== "production" && !children.key)
            throw new Error("The provided child should have a key property, please provide it");
        if (childStack.length === 1 && childStack[0].key === children.key)
            return;
        if (orientation.current === "forward")
            setChildStack((p) => ({
                ...p,
                childStack: [...p.childStack, { ...children, createdAt: Date.now() }],
            }));
        else
            setChildStack((p) => ({
                ...p,
                childStack: [{ ...children, createdAt: Date.now() }, ...p.childStack],
            }));
    }, [children.key]);
    useEffect(() => {
        if (orientation.current === "backward") {
            setChildStack((prev) => {
                return {
                    ...prev,
                    offset: prev.childStack.length,
                };
            });
        }
    }, [childStack.length]);
    childStack.forEach((a, i, arr) => {
        if (a.key === children.key)
            arr[i] = { ...children, createdAt: a.createdAt };
    });
    const predictedStep = childStack.length - offset;
    return (_jsx(_Fragment, { children: childStack.length ? (_jsx(Transition, { ref: sectionRef, contentStyle: contentStyle, className: className, step: predictedStep, onDiscardStep: (discardedKey, animatedAt) => {
                setTimeout(() => {
                    if (onDiscardStep)
                        onDiscardStep(discardedKey);
                    orientation.current = "forward";
                    setChildStack((prev) => {
                        return {
                            childStack: prev.childStack.filter((a) => {
                                return a.key !== discardedKey || a.createdAt > animatedAt;
                            }),
                            offset: prev.offset === 1 ? 1 : prev.offset - 1,
                        };
                    });
                }, 0);
            }, lockTransitionWidth: lockTransitionWidth, lockTransitionHeight: lockTransitionHeight, contentClassName: contentClassName, ...props, children: childStack })) : null }));
}
/**
 * A component that handles transitions when child elements change, making the swap appear smooth.
 */
export const UncontrolledTransition = forwardRef(_UncontrolledTransition);
export default UncontrolledTransition;
//# sourceMappingURL=UncontrolledTransition.js.map