import { mergeProps, splitProps, useContext } from "solid-js";
import classNames from "./classnames";
import { Modal as BaseModal, } from "solid-bootstrap-core";
import Fade from "./Fade";
import OffcanvasBody from "./OffcanvasBody";
import OffcanvasToggling from "./OffcanvasToggling";
import ModalContext from "./ModalContext";
import NavbarContext from "./NavbarContext";
import OffcanvasHeader from "./OffcanvasHeader";
import OffcanvasTitle from "./OffcanvasTitle";
import { useBootstrapPrefix } from "./ThemeProvider";
import { BootstrapModalManager, getSharedManager } from "./BootstrapModalManager";
const defaultProps = {
    show: false,
    backdrop: true,
    keyboard: true,
    scroll: false,
    autoFocus: true,
    enforceFocus: true,
    restoreFocus: true,
    placement: "start",
};
function DialogTransition(props) {
    return <OffcanvasToggling {...props}>{props.children}</OffcanvasToggling>;
}
function BackdropTransition(props) {
    return <Fade {...props}>{props.children}</Fade>;
}
const Offcanvas = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "bsPrefix",
        "className",
        "children",
        "aria-labelledby",
        "placement",
        /*BaseModal props */
        "show",
        "backdrop",
        "keyboard",
        "scroll",
        "onEscapeKeyDown",
        "onShow",
        "onHide",
        "container",
        "autoFocus",
        "enforceFocus",
        "restoreFocus",
        "restoreFocusOptions",
        "onEntered",
        "onExit",
        "onExiting",
        "onEnter",
        "onEntering",
        "onExited",
        "backdropClassName",
        "manager",
        "ref",
    ]);
    let modalManager;
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "offcanvas");
    const navbarContext = useContext(NavbarContext);
    const handleHide = () => {
        navbarContext?.onToggle?.();
        local.onHide?.();
    };
    const modalContext = {
        get onHide() {
            return handleHide;
        },
    };
    function getModalManager() {
        if (local.manager)
            return local.manager;
        if (local.scroll) {
            // Have to use a different modal manager since the shared
            // one handles overflow.
            if (!modalManager)
                modalManager = new BootstrapModalManager({
                    handleContainerOverflow: false,
                });
            return modalManager;
        }
        return getSharedManager();
    }
    const handleEnter = (node, ...args) => {
        if (node)
            node.style.visibility = "visible";
        local.onEnter?.(node, ...args);
    };
    const handleExited = (node, ...args) => {
        if (node)
            node.style.visibility = "";
        local.onExited?.(...args);
    };
    const renderBackdrop = (backdropProps) => (<div {...backdropProps} className={classNames(`${bsPrefix}-backdrop`, local.backdropClassName)}>
      {props.children}
    </div>);
    const renderDialog = (dialogProps) => (<div 
    // @ts-ignore
    role="dialog" {...dialogProps} {...props} className={classNames(local.className, bsPrefix, `${bsPrefix}-${local.placement}`)} aria-labelledby={local["aria-labelledby"]}>
      {local.children}
    </div>);
    return (<ModalContext.Provider value={modalContext}>
      <BaseModal show={local.show} ref={local.ref} backdrop={local.backdrop} container={local.container} keyboard={local.keyboard} autoFocus={local.autoFocus} enforceFocus={local.enforceFocus && !scroll} restoreFocus={local.restoreFocus} restoreFocusOptions={local.restoreFocusOptions} onEscapeKeyDown={local.onEscapeKeyDown} onShow={local.onShow} onHide={handleHide} onEnter={handleEnter} onEntering={local.onEntering} onEntered={local.onEntered} onExit={local.onExit} onExiting={local.onExiting} onExited={handleExited} manager={getModalManager()} transition={DialogTransition} backdropTransition={BackdropTransition} renderBackdrop={renderBackdrop} renderDialog={renderDialog}/>
    </ModalContext.Provider>);
};
export default Object.assign(Offcanvas, {
    Body: OffcanvasBody,
    Header: OffcanvasHeader,
    Title: OffcanvasTitle,
});