// ported from https://github.com/react-bootstrap/react-bootstrap/blob/f11723114d532cfce840417834a73733a8436414/src/Collapse.tsx
import { children, mergeProps, splitProps } from "solid-js";
import css from "dom-helpers/css";
import { ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED, } from "solid-react-transition";
import triggerBrowserReflow from "./triggerBrowserReflow";
import transitionEndListener from "./transitionEndListener";
import TransitionWrapper from "./TransitionWrapper";
import classNames from "./classnames";
import { resolveClasses } from "solid-bootstrap-core";
const MARGINS = {
    height: ["marginTop", "marginBottom"],
    width: ["marginLeft", "marginRight"],
};
function getDefaultDimensionValue(dimension, elem) {
    const offset = `offset${dimension[0].toUpperCase()}${dimension.slice(1)}`;
    const value = elem[offset];
    const margins = MARGINS[dimension];
    return (value +
        // @ts-ignore
        parseInt(css(elem, margins[0]), 10) +
        // @ts-ignore
        parseInt(css(elem, margins[1]), 10));
}
const collapseStyles = {
    [EXITED]: "collapse",
    [EXITING]: "collapsing",
    [ENTERING]: "collapsing",
    [ENTERED]: "collapse show",
    [UNMOUNTED]: "",
};
const defaultProps = {
    in: false,
    dimension: "height",
    timeout: 300,
    mountOnEnter: false,
    unmountOnExit: false,
    appear: false,
    getDimensionValue: getDefaultDimensionValue,
};
const Collapse = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "onEnter",
        "onEntering",
        "onEntered",
        "onExit",
        "onExiting",
        "className",
        "children",
        "dimension",
        "getDimensionValue",
    ]);
    /* Compute dimension */
    const computedDimension = () => typeof local.dimension === "function" ? local.dimension() : local.dimension;
    /* -- Expanding -- */
    const handleEnter = (elem) => {
        elem.style[computedDimension()] = "0";
        local.onEnter?.(elem);
    };
    const handleEntering = (elem) => {
        const scroll = `scroll${computedDimension()[0].toUpperCase()}${computedDimension().slice(1)}`;
        elem.style[computedDimension()] = `${elem[scroll]}px`;
        local.onEntering?.(elem);
    };
    const handleEntered = (elem) => {
        // @ts-ignore
        elem.style[computedDimension()] = null;
        local.onEntered?.(elem);
    };
    /* -- Collapsing -- */
    const handleExit = (elem) => {
        elem.style[computedDimension()] = `${local.getDimensionValue(computedDimension(), elem)}px`;
        // @ts-ignore
        triggerBrowserReflow(elem);
        local.onExit?.(elem);
    };
    const handleExiting = (elem) => {
        // @ts-ignore
        elem.style[computedDimension()] = null;
        local.onExiting?.(elem);
    };
    let child = children(() => local.children);
    let prevClasses;
    return (<TransitionWrapper addEndListener={transitionEndListener} {...props} aria-expanded={props.role ? props.in : null} onEnter={handleEnter} onEntering={handleEntering} onEntered={handleEntered} onExit={handleExit} onExiting={handleExiting}>
      {((state, innerProps) => {
            const el = child();
            innerProps.ref(el);
            const newClasses = classNames(local.className, collapseStyles[state], computedDimension() === "width" && "collapse-horizontal");
            resolveClasses(el, prevClasses, newClasses);
            prevClasses = newClasses;
            return el;
        })}
    </TransitionWrapper>);
};
export default Collapse;