import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
import { createPortal } from "react-dom";
import MutableHamburgerButton from "../MutableHamburgerButton";
import ScrollAndFocusLock from "../utilitary/ScrollAndFocusLock";
import Styles from "./AdaptiveSidebar.module.scss";
import useBreakpoint from "../../hooks/ui/useBreakpoint";
import { useOneUIConfig } from "../../context/OneUIProvider";
const DefaultVisibilityControl = ({ open }) => (_jsx(MutableHamburgerButton, { size: 48, state: open ? "closed" : "default" }));
function _AdaptiveSidebar({ open: externalOpen, children, className = "", breakInto = 640, visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl, ...props }, ref) {
    const [open, setOpen] = useState(false);
    const containerRef = useRef(null);
    const _open = externalOpen === undefined ? open : externalOpen;
    const isMobile = useBreakpoint(breakInto);
    const globalClassName = useOneUIConfig("component.adaptiveSidebar.className");
    const globalControlClassName = useOneUIConfig("component.adaptiveSidebar.controlClassName");
    useImperativeHandle(ref, () => ({
        dismiss: () => setOpen(false),
    }), []);
    useEffect(() => {
        if (process.env.NODE_ENV === "test")
            return;
        containerRef.current.scrollTo({
            left: 0,
            behavior: "smooth",
            top: 0,
        });
    }, [_open]);
    const externalControl = externalOpen !== undefined;
    const content = (_jsx("div", { ref: containerRef, className: `${isMobile ? Styles.mobile : Styles.desktop} ${Styles.container} ${!externalControl &&
            DefaultVisibilityControl === VisibilityControlComponent
            ? Styles.defaultPadding
            : ""} ${_open ? Styles.open : Styles.closed} ${className} ${globalClassName}`, ...props, children: _jsx(ScrollAndFocusLock, { open: _open, children: children }) }));
    return (_jsx(_Fragment, { children: isMobile
            ? createPortal(_jsxs(_Fragment, { children: [content, !externalControl && (_jsx("div", { className: `${isMobile ? Styles.mobile : Styles.desktop} ${Styles.hamburger} ${globalControlClassName}`, onClick: () => setOpen((a) => !a), children: _jsx(VisibilityControlComponent, { open: _open }) }))] }), document.body)
            : content }));
}
/**
 * A component that displays a sidebar panel. On mobile devices, it shows a floating button to open and close the panel.
 * On desktop, the panel displays directly in the page.
 **/
const AdaptiveSidebar = forwardRef(_AdaptiveSidebar);
export default AdaptiveSidebar;
//# sourceMappingURL=AdaptiveSidebar.js.map