'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';
export * from './types.js';
import { useConfig } from '../../providers/Config/index.js';
import { useEditDepth } from '../../providers/EditDepth/index.js';
import { Drawer, DrawerToggler } from '../Drawer/index.js';
import { ListDrawerContent } from './DrawerContent.js';
export const baseClass = 'list-drawer';
export const formatListDrawerSlug = ({ depth, uuid })=>// supply when creating a new document and no id is available
    `list-drawer_${depth}_${uuid}`;
export const ListDrawerToggler = ({ children, className, disabled, drawerSlug, onClick, ...rest })=>{
    return /*#__PURE__*/ _jsxDEV(DrawerToggler, {
        className: [
            className,
            `${baseClass}__toggler`
        ].filter(Boolean).join(' '),
        disabled: disabled,
        onClick: onClick,
        slug: drawerSlug,
        ...rest,
        children: children
    }, void 0, false, {
        fileName: "src/elements/ListDrawer/index.tsx",
        lineNumber: 32,
        columnNumber: 5
    }, this);
};
export const ListDrawer = (props)=>{
    const { drawerSlug } = props;
    return /*#__PURE__*/ _jsxDEV(Drawer, {
        className: baseClass,
        gutter: false,
        Header: null,
        slug: drawerSlug,
        children: /*#__PURE__*/ _jsxDEV(ListDrawerContent, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/ListDrawer/index.tsx",
            lineNumber: 49,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/ListDrawer/index.tsx",
        lineNumber: 48,
        columnNumber: 5
    }, this);
};
/**
 * Returns an array containing the ListDrawer component, the ListDrawerToggler component, and an object with state and methods for controlling the drawer.
 * @example
 * import { useListDrawer } from '@payloadcms/ui'
 *
 * // inside a React component
 * const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({
 *   collectionSlugs: ['users'],
 *   selectedCollection: 'users',
 * })
 *
 * // inside the return statement
 * return (
 *    <>
 *      <ListDrawer />
 *      <ListDrawerToggler onClick={openDrawer}>Open List Drawer</ListDrawerToggler>
 *    </>
 * )
 */ export const useListDrawer = ({ collectionSlugs: collectionSlugsFromProps, filterOptions, selectedCollection, uploads })=>{
    const { config: { collections } } = useConfig();
    const drawerDepth = useEditDepth();
    const uuid = useId();
    const { closeModal, modalState, openModal, toggleModal } = useModal();
    const [isOpen, setIsOpen] = useState(false);
    const [collectionSlugs, setCollectionSlugs] = useState(collectionSlugsFromProps);
    const drawerSlug = formatListDrawerSlug({
        depth: drawerDepth,
        uuid
    });
    useEffect(()=>{
        setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
    }, [
        modalState,
        drawerSlug
    ]);
    useEffect(()=>{
        if (!collectionSlugs || collectionSlugs.length === 0) {
            const filteredCollectionSlugs = collections.filter(({ upload })=>{
                if (uploads) {
                    return Boolean(upload) === true;
                }
                return true;
            });
            setCollectionSlugs(filteredCollectionSlugs.map(({ slug })=>slug));
        }
    }, [
        collectionSlugs,
        uploads,
        collections
    ]);
    const toggleDrawer = useCallback(()=>{
        toggleModal(drawerSlug);
    }, [
        toggleModal,
        drawerSlug
    ]);
    const closeDrawer = useCallback(()=>{
        closeModal(drawerSlug);
    }, [
        drawerSlug,
        closeModal
    ]);
    const openDrawer = useCallback(()=>{
        openModal(drawerSlug);
    }, [
        drawerSlug,
        openModal
    ]);
    const MemoizedDrawer = useMemo(()=>{
        return (props)=>/*#__PURE__*/ _createElement(ListDrawer, {
                ...props,
                closeDrawer: closeDrawer,
                collectionSlugs: collectionSlugs,
                drawerSlug: drawerSlug,
                filterOptions: filterOptions,
                key: drawerSlug,
                selectedCollection: selectedCollection,
                uploads: uploads,
                __source: {
                    fileName: "src/elements/ListDrawer/index.tsx",
                    lineNumber: 124,
                    columnNumber: 7
                },
                __self: this
            });
    }, [
        drawerSlug,
        collectionSlugs,
        uploads,
        closeDrawer,
        selectedCollection,
        filterOptions
    ]);
    const MemoizedDrawerToggler = useMemo(()=>{
        return (props)=>/*#__PURE__*/ _jsxDEV(ListDrawerToggler, {
                ...props,
                drawerSlug: drawerSlug
            }, void 0, false, {
                fileName: "src/elements/ListDrawer/index.tsx",
                lineNumber: 138,
                columnNumber: 23
            }, this);
    }, [
        drawerSlug
    ]);
    const MemoizedDrawerState = useMemo(()=>({
            closeDrawer,
            collectionSlugs,
            drawerDepth,
            drawerSlug,
            isDrawerOpen: isOpen,
            openDrawer,
            setCollectionSlugs,
            toggleDrawer
        }), [
        drawerDepth,
        drawerSlug,
        isOpen,
        toggleDrawer,
        closeDrawer,
        openDrawer,
        setCollectionSlugs,
        collectionSlugs
    ]);
    return [
        MemoizedDrawer,
        MemoizedDrawerToggler,
        MemoizedDrawerState
    ];
};

//# sourceMappingURL=index.js.map