import React, { useCallback, useEffect, useState } from 'react';
import { Modal, useModal } from '@faceless-ui/modal';
import { useWindowInfo } from '@faceless-ui/window-info';
import { useTranslation } from 'react-i18next';
import { EditDepthContext, useEditDepth } from '../../utilities/EditDepth';
import './index.scss';
const baseClass = 'drawer';
const zBase = 100;
const formatDrawerSlug = ({ slug, depth, }) => `drawer_${depth}_${slug}`;
export const DrawerToggler = ({ slug, formatSlug, children, className, onClick, ...rest }) => {
    const { openModal } = useModal();
    const drawerDepth = useEditDepth();
    const handleClick = useCallback((e) => {
        openModal(formatSlug !== false ? formatDrawerSlug({ slug, depth: drawerDepth }) : slug);
        if (typeof onClick === 'function')
            onClick(e);
    }, [openModal, drawerDepth, slug, onClick, formatSlug]);
    return (React.createElement("button", { onClick: handleClick, type: "button", className: className, ...rest }, children));
};
export const Drawer = ({ slug, formatSlug, children, className, }) => {
    const { t } = useTranslation('general');
    const { closeModal, modalState } = useModal();
    const { breakpoints: { m: midBreak } } = useWindowInfo();
    const drawerDepth = useEditDepth();
    const [isOpen, setIsOpen] = useState(false);
    const [modalSlug] = useState(() => (formatSlug !== false ? formatDrawerSlug({ slug, depth: drawerDepth }) : slug));
    useEffect(() => {
        setIsOpen(modalState[modalSlug].isOpen);
    }, [modalSlug, modalState]);
    return (React.createElement(Modal, { slug: modalSlug, className: [
            className,
            baseClass,
            isOpen && `${baseClass}--is-open`,
        ].filter(Boolean).join(' '), style: {
            zIndex: zBase + drawerDepth,
        } },
        drawerDepth === 1 && (React.createElement("div", { className: `${baseClass}__blur-bg` })),
        React.createElement("button", { className: `${baseClass}__close`, id: `close-drawer__${modalSlug}`, type: "button", onClick: () => closeModal(modalSlug), style: {
                width: `calc(${midBreak ? 'var(--gutter-h)' : 'var(--nav-width)'} + ${drawerDepth - 1} * 25px)`,
            }, "aria-label": t('close') }),
        React.createElement("div", { className: `${baseClass}__content` },
            React.createElement("div", { className: `${baseClass}__content-children` },
                React.createElement(EditDepthContext.Provider, { value: drawerDepth + 1 }, children)))));
};
