'use client';
import * as facelessUIImport from '@faceless-ui/modal';
import React, { useCallback, useEffect, useState } from 'react';
import { X } from '../../icons/X/index.js';
import { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Gutter } from '../Gutter/index.js';
const baseClass = 'drawer';
const zBase = 100;
export const formatDrawerSlug = ({ slug, depth })=>`drawer_${depth}_${slug}`;
export const DrawerToggler = ({ slug, children, className, disabled, onClick, ...rest })=>{
    const { Modal, useModal } = facelessUIImport;
    const { openModal } = useModal();
    const handleClick = useCallback((e)=>{
        openModal(slug);
        if (typeof onClick === 'function') onClick(e);
    }, [
        openModal,
        slug,
        onClick
    ]);
    return /*#__PURE__*/ React.createElement("button", {
        className: className,
        disabled: disabled,
        onClick: handleClick,
        type: "button",
        ...rest
    }, children);
};
export const Drawer = ({ slug, Header, children, className, gutter = true, hoverTitle, title })=>{
    const { Modal, useModal } = facelessUIImport;
    const { t } = useTranslation();
    const { closeModal, modalState } = useModal();
    const drawerDepth = useEditDepth();
    const [isOpen, setIsOpen] = useState(false);
    const [animateIn, setAnimateIn] = useState(false);
    useEffect(()=>{
        setIsOpen(modalState[slug]?.isOpen);
    }, [
        slug,
        modalState
    ]);
    useEffect(()=>{
        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__*/ React.createElement(Modal, {
            className: [
                className,
                baseClass,
                animateIn && `${baseClass}--is-open`,
                drawerDepth > 1 && `${baseClass}--nested`
            ].filter(Boolean).join(' '),
            slug: slug,
            style: {
                zIndex: zBase + drawerDepth
            }
        }, (!drawerDepth || drawerDepth === 1) && /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__blur-bg`
        }), /*#__PURE__*/ React.createElement("button", {
            "aria-label": t('general:close'),
            className: `${baseClass}__close`,
            id: `close-drawer__${slug}`,
            onClick: ()=>closeModal(slug),
            type: "button"
        }), /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__content`
        }, /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__blur-bg-content`
        }), /*#__PURE__*/ React.createElement(Gutter, {
            className: `${baseClass}__content-children`,
            left: gutter,
            right: gutter
        }, /*#__PURE__*/ React.createElement(EditDepthContext.Provider, {
            value: drawerDepth + 1
        }, Header, Header === undefined && /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__header`
        }, /*#__PURE__*/ React.createElement("h2", {
            className: `${baseClass}__header__title`,
            title: hoverTitle ? title : null
        }, title), /*#__PURE__*/ React.createElement("button", {
            "aria-label": t('general:close'),
            className: `${baseClass}__header__close`,
            id: `close-drawer__${slug}`,
            onClick: ()=>closeModal(slug),
            type: "button"
        }, /*#__PURE__*/ React.createElement(X, null))), children))));
    }
    return null;
};

//# sourceMappingURL=index.js.map