// ported from https://github.com/react-bootstrap/react-bootstrap/blob/f11723114d532cfce840417834a73733a8436414/src/Fade.tsx
import { children, mergeProps, splitProps } from "solid-js";
import { ENTERED, ENTERING } from "solid-react-transition";
import TransitionWrapper from "./TransitionWrapper";
import transitionEndListener from "./transitionEndListener";
import triggerBrowserReflow from "./triggerBrowserReflow";
import classNames from "./classnames";
import { resolveClasses } from "solid-bootstrap-core";
const defaultProps = {
    in: false,
    timeout: 300,
    mountOnEnter: false,
    unmountOnExit: false,
    appear: false,
};
const fadeStyles = {
    [ENTERING]: "show",
    [ENTERED]: "show",
};
const Fade = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "className",
        "children",
        "transitionClasses",
    ]);
    const handleEnter = (node, isAppearing) => {
        triggerBrowserReflow(node);
        props.onEnter?.(node, isAppearing);
    };
    const resolvedChildren = children(() => local.children);
    let prevClasses;
    return (<TransitionWrapper addEndListener={transitionEndListener} onEnter={handleEnter} {...props}>
      {((status, innerProps) => {
            let el = resolvedChildren();
            while (typeof el === "function")
                el = el();
            innerProps.ref(el);
            const newClasses = classNames("fade", local.className, 
            // @ts-ignore
            fadeStyles?.[status], local.transitionClasses?.[status]);
            resolveClasses(el, prevClasses, newClasses);
            prevClasses = newClasses;
            return el;
        })}
    </TransitionWrapper>);
};
export default Fade;