'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { createElement as _createElement } from "react";
import { useModal } from '@faceless-ui/modal';
import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
import { useRelatedCollections } from '../../hooks/useRelatedCollections.js';
import { useEditDepth } from '../../providers/EditDepth/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Drawer, DrawerToggler } from '../Drawer/index.js';
import { DocumentDrawerContent } from './DrawerContent.js';
import './index.scss';
export const documentDrawerBaseClass = 'doc-drawer';
const formatDocumentDrawerSlug = ({ id, collectionSlug, depth, uuid })=>`doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`;
export const DocumentDrawerToggler = ({ children, className, collectionSlug, disabled, drawerSlug, onClick, operation, ...rest })=>{
    const { t } = useTranslation();
    const [collectionConfig] = useRelatedCollections(collectionSlug);
    return /*#__PURE__*/ _jsxDEV(DrawerToggler, {
        "aria-label": t(operation === 'create' ? 'fields:addNewLabel' : 'general:editLabel', {
            label: collectionConfig?.labels.singular
        }),
        className: [
            className,
            `${documentDrawerBaseClass}__toggler`
        ].filter(Boolean).join(' '),
        disabled: disabled,
        onClick: onClick,
        slug: drawerSlug,
        ...rest,
        children: children
    }, void 0, false, {
        fileName: "src/elements/DocumentDrawer/index.tsx",
        lineNumber: 47,
        columnNumber: 5
    }, this);
};
export const DocumentDrawer = (props)=>{
    const { drawerSlug } = props;
    return /*#__PURE__*/ _jsxDEV(Drawer, {
        className: documentDrawerBaseClass,
        gutter: false,
        Header: null,
        slug: drawerSlug,
        children: /*#__PURE__*/ _jsxDEV(DocumentDrawerContent, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/DocumentDrawer/index.tsx",
            lineNumber: 67,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/DocumentDrawer/index.tsx",
        lineNumber: 66,
        columnNumber: 5
    }, this);
};
/**
 * A hook to manage documents from a drawer modal.
 * It provides the components and methods needed to open, close, and interact with the drawer.
 * @example
 * const [DocumentDrawer, DocumentDrawerToggler, { openDrawer, closeDrawer }] = useDocumentDrawer({
 *   collectionSlug: 'posts',
 *   id: postId, // optional, if not provided, it will render the "create new" view
 * })
 *
 * // ...
 *
 * return (
 *   <div>
 *     <DocumentDrawerToggler collectionSlug="posts" id={postId}>
 *       Edit Post
 *    </DocumentDrawerToggler>
 *    <DocumentDrawer collectionSlug="posts" id={postId} />
 *  </div>
 */ export const useDocumentDrawer = ({ id, collectionSlug, overrideEntityVisibility })=>{
    const editDepth = useEditDepth();
    const uuid = useId();
    const { closeModal, modalState, openModal, toggleModal } = useModal();
    const [isOpen, setIsOpen] = useState(false);
    const drawerSlug = formatDocumentDrawerSlug({
        id,
        collectionSlug,
        depth: editDepth,
        uuid
    });
    useEffect(()=>{
        setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
    }, [
        modalState,
        drawerSlug
    ]);
    const toggleDrawer = useCallback(()=>{
        toggleModal(drawerSlug);
    }, [
        toggleModal,
        drawerSlug
    ]);
    const closeDrawer = useCallback(()=>{
        closeModal(drawerSlug);
    }, [
        closeModal,
        drawerSlug
    ]);
    const openDrawer = useCallback(()=>{
        openModal(drawerSlug);
    }, [
        openModal,
        drawerSlug
    ]);
    const MemoizedDrawer = useMemo(()=>{
        return (props)=>/*#__PURE__*/ _createElement(DocumentDrawer, {
                ...props,
                collectionSlug: collectionSlug,
                drawerSlug: drawerSlug,
                id: id,
                key: drawerSlug,
                overrideEntityVisibility: overrideEntityVisibility,
                __source: {
                    fileName: "src/elements/DocumentDrawer/index.tsx",
                    lineNumber: 126,
                    columnNumber: 7
                },
                __self: this
            });
    }, [
        id,
        drawerSlug,
        collectionSlug,
        overrideEntityVisibility
    ]);
    const MemoizedDrawerToggler = useMemo(()=>{
        return (props)=>/*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
                ...props,
                collectionSlug: collectionSlug,
                drawerSlug: drawerSlug,
                operation: !id ? 'create' : 'update'
            }, void 0, false, {
                fileName: "src/elements/DocumentDrawer/index.tsx",
                lineNumber: 139,
                columnNumber: 7
            }, this);
    }, [
        id,
        drawerSlug,
        collectionSlug
    ]);
    const MemoizedDrawerState = useMemo(()=>({
            closeDrawer,
            drawerDepth: editDepth,
            drawerSlug,
            isDrawerOpen: isOpen,
            openDrawer,
            toggleDrawer
        }), [
        editDepth,
        drawerSlug,
        isOpen,
        toggleDrawer,
        closeDrawer,
        openDrawer
    ]);
    return [
        MemoizedDrawer,
        MemoizedDrawerToggler,
        MemoizedDrawerState
    ];
};

//# sourceMappingURL=index.js.map