'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { Modal, useModal } from '@faceless-ui/modal';
import React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react';
import { XIcon } from '../../icons/X/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Gutter } from '../Gutter/index.js';
import './index.scss';
const baseClass = 'drawer';
export const drawerZBase = 100;
export const formatDrawerSlug = ({ slug, depth })=>`drawer_${depth}_${slug}`;
export { useDrawerSlug } from './useDrawerSlug.js';
export const DrawerToggler = ({ slug, children, className, disabled, onClick, ...rest })=>{
    const { openModal } = useModal();
    const handleClick = useCallback((e)=>{
        openModal(slug);
        if (typeof onClick === 'function') {
            onClick(e);
        }
    }, [
        openModal,
        slug,
        onClick
    ]);
    return /*#__PURE__*/ _jsxDEV("button", {
        className: className,
        disabled: disabled,
        onClick: handleClick,
        type: "button",
        ...rest,
        children: children
    }, void 0, false, {
        fileName: "src/elements/Drawer/index.tsx",
        lineNumber: 42,
        columnNumber: 5
    }, this);
};
export const Drawer = ({ slug, children, className, gutter = true, Header, hoverTitle, title })=>{
    const { t } = useTranslation();
    const { closeModal, modalState } = useModal();
    const drawerDepth = useDrawerDepth();
    const isOpen = !!modalState[slug]?.isOpen;
    const [animateIn, setAnimateIn] = useState(isOpen);
    useLayoutEffect(()=>{
        setAnimateIn(isOpen);
    }, [
        isOpen
    ]);
    if (isOpen) {
        // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers
        return /*#__PURE__*/ _jsxDEV(DrawerDepthProvider, {
            children: /*#__PURE__*/ _jsxDEV(Modal, {
                className: [
                    className,
                    baseClass,
                    animateIn && `${baseClass}--is-open`,
                    drawerDepth > 1 && `${baseClass}--nested`
                ].filter(Boolean).join(' '),
                // Fixes https://github.com/payloadcms/payload/issues/13778
                closeOnBlur: false,
                slug: slug,
                style: {
                    zIndex: drawerZBase + drawerDepth
                },
                children: [
                    (!drawerDepth || drawerDepth === 1) && /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__blur-bg`
                    }, void 0, false, {
                        fileName: "src/elements/Drawer/index.tsx",
                        lineNumber: 89,
                        columnNumber: 51
                    }, this),
                    /*#__PURE__*/ _jsxDEV("button", {
                        "aria-label": t('general:close'),
                        className: `${baseClass}__close`,
                        id: `close-drawer__${slug}`,
                        onClick: ()=>closeModal(slug),
                        type: "button"
                    }, void 0, false, {
                        fileName: "src/elements/Drawer/index.tsx",
                        lineNumber: 90,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__content`,
                        style: {
                            width: `calc(100% - (${drawerDepth} * var(--gutter-h)))`
                        },
                        children: [
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__blur-bg-content`
                            }, void 0, false, {
                                fileName: "src/elements/Drawer/index.tsx",
                                lineNumber: 103,
                                columnNumber: 13
                            }, this),
                            /*#__PURE__*/ _jsxDEV(Gutter, {
                                className: `${baseClass}__content-children`,
                                left: gutter,
                                right: gutter,
                                children: [
                                    Header,
                                    Header === undefined && /*#__PURE__*/ _jsxDEV("div", {
                                        className: `${baseClass}__header`,
                                        children: [
                                            /*#__PURE__*/ _jsxDEV("h2", {
                                                className: `${baseClass}__header__title`,
                                                title: hoverTitle ? title : null,
                                                children: title
                                            }, void 0, false, {
                                                fileName: "src/elements/Drawer/index.tsx",
                                                lineNumber: 108,
                                                columnNumber: 19
                                            }, this),
                                            /* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...
                    i.e. changing to a `div` element will fix the animation issue but will break accessibility
                  */ /*#__PURE__*/ _jsxDEV("button", {
                                                "aria-label": t('general:close'),
                                                className: `${baseClass}__header__close`,
                                                id: `close-drawer__${slug}`,
                                                onClick: ()=>closeModal(slug),
                                                type: "button",
                                                children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                                                    fileName: "src/elements/Drawer/index.tsx",
                                                    lineNumber: 121,
                                                    columnNumber: 21
                                                }, this)
                                            }, void 0, false, {
                                                fileName: "src/elements/Drawer/index.tsx",
                                                lineNumber: 114,
                                                columnNumber: 19
                                            }, this)
                                        ]
                                    }, void 0, true, {
                                        fileName: "src/elements/Drawer/index.tsx",
                                        lineNumber: 107,
                                        columnNumber: 17
                                    }, this),
                                    children
                                ]
                            }, void 0, true, {
                                fileName: "src/elements/Drawer/index.tsx",
                                lineNumber: 104,
                                columnNumber: 13
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/Drawer/index.tsx",
                        lineNumber: 97,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/Drawer/index.tsx",
                lineNumber: 73,
                columnNumber: 9
            }, this)
        }, void 0, false, {
            fileName: "src/elements/Drawer/index.tsx",
            lineNumber: 72,
            columnNumber: 7
        }, this);
    }
    return null;
};
export const DrawerDepthContext = /*#__PURE__*/ createContext(1);
export const DrawerDepthProvider = ({ children })=>{
    const parentDepth = useDrawerDepth();
    const depth = parentDepth + 1;
    return /*#__PURE__*/ _jsxDEV(DrawerDepthContext, {
        value: depth,
        children: children
    }, void 0, false, {
        fileName: "src/elements/Drawer/index.tsx",
        lineNumber: 142,
        columnNumber: 10
    }, this);
};
export const useDrawerDepth = ()=>use(DrawerDepthContext);

//# sourceMappingURL=index.js.map