'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useModal } from '@faceless-ui/modal';
import { getTranslation } from '@payloadcms/translations';
import { toWords } from 'payload/shared';
import React, { useEffect, useMemo, useState } from 'react';
import { DefaultBlockImage } from '../../graphics/DefaultBlockImage/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Drawer } from '../Drawer/index.js';
import { ThumbnailCard } from '../ThumbnailCard/index.js';
import './index.scss';
import { ItemSearch } from './ItemSearch/index.js';
const baseClass = 'items-drawer';
const getItemLabel = (item, i18n)=>{
    // Handle ClientBlock
    if ('labels' in item && item.labels?.singular) {
        if (typeof item.labels.singular === 'string') {
            return item.labels.singular.toLowerCase();
        }
        if (typeof item.labels.singular === 'object') {
            return getTranslation(item.labels.singular, i18n).toLowerCase();
        }
    }
    // Handle ClientWidget with label (already resolved from function on server)
    if ('label' in item && item.label) {
        if (typeof item.label === 'string') {
            return item.label.toLowerCase();
        }
        if (typeof item.label === 'object') {
            return getTranslation(item.label, i18n).toLowerCase();
        }
    }
    // Fallback to slug
    if ('slug' in item) {
        return toWords(item.slug).toLowerCase();
    }
    return '';
};
const getItemSlug = (item)=>{
    return item.slug;
};
const getItemImageInfo = (item)=>{
    if ('imageURL' in item) {
        return {
            imageAltText: item.imageAltText,
            imageURL: item.imageURL
        };
    }
    return {
        imageAltText: undefined,
        imageURL: undefined
    };
};
const getItemDisplayLabel = (item, i18n)=>{
    // Handle ClientBlock
    if ('labels' in item && item.labels?.singular) {
        return getTranslation(item.labels.singular, i18n);
    }
    // Handle ClientWidget with label (already resolved from function on server)
    if ('label' in item && item.label) {
        if (typeof item.label === 'string') {
            return item.label;
        }
        if (typeof item.label === 'object') {
            return getTranslation(item.label, i18n);
        }
    }
    // Fallback to slug - convert to human-readable label
    return toWords(item.slug);
};
export const ItemsDrawer = (props)=>{
    const { addRowIndex, drawerSlug, items, labels, onItemClick, searchPlaceholder, title } = props;
    const [searchTerm, setSearchTerm] = useState('');
    const [filteredItems, setFilteredItems] = useState(items);
    const { closeModal, isModalOpen } = useModal();
    const { i18n, t } = useTranslation();
    const { config } = useConfig();
    const itemGroups = useMemo(()=>{
        const groups = {
            _none: []
        };
        filteredItems.forEach((item)=>{
            if (typeof item === 'object' && 'admin' in item && item.admin?.group) {
                const group = item.admin.group;
                const label = typeof group === 'string' ? group : getTranslation(group, i18n);
                if (Object.hasOwn(groups, label)) {
                    groups[label].push(item);
                } else {
                    groups[label] = [
                        item
                    ];
                }
            } else {
                groups._none.push(item);
            }
        });
        return groups;
    }, [
        filteredItems,
        i18n
    ]);
    useEffect(()=>{
        if (!isModalOpen(drawerSlug)) {
            setSearchTerm('');
        }
    }, [
        isModalOpen,
        drawerSlug
    ]);
    useEffect(()=>{
        const searchTermToUse = searchTerm.toLowerCase();
        const matchingItems = items?.reduce((matchedItems, _item)=>{
            let item;
            if (typeof _item === 'string') {
                // Handle string references (for blocks)
                item = config.blocksMap?.[_item];
            } else {
                item = _item;
            }
            if (item) {
                const itemLabel = getItemLabel(item, i18n);
                if (itemLabel.includes(searchTermToUse)) {
                    matchedItems.push(item);
                }
            }
            return matchedItems;
        }, []);
        setFilteredItems(matchingItems || []);
    }, [
        searchTerm,
        items,
        i18n,
        config.blocksMap
    ]);
    const finalTitle = title || (labels ? t('fields:addLabel', {
        label: getTranslation(labels.singular, i18n)
    }) : t('fields:addNew'));
    return /*#__PURE__*/ _jsxDEV(Drawer, {
        slug: drawerSlug,
        title: finalTitle,
        children: [
            /*#__PURE__*/ _jsxDEV(ItemSearch, {
                placeholder: searchPlaceholder || t('fields:searchForBlock'),
                setSearchTerm: setSearchTerm
            }, void 0, false, {
                fileName: "src/elements/ItemsDrawer/index.tsx",
                lineNumber: 164,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__items-wrapper`,
                children: /*#__PURE__*/ _jsxDEV("ul", {
                    className: `${baseClass}__item-groups`,
                    children: Object.entries(itemGroups).map(([groupLabel, groupItems])=>!groupItems.length ? null : /*#__PURE__*/ _jsxDEV("li", {
                            className: [
                                `${baseClass}__item-group`,
                                groupLabel === '_none' && `${baseClass}__item-group-none`
                            ].filter(Boolean).join(' '),
                            children: [
                                groupLabel !== '_none' && /*#__PURE__*/ _jsxDEV("h3", {
                                    className: `${baseClass}__item-group-label`,
                                    children: groupLabel
                                }, void 0, false, {
                                    fileName: "src/elements/ItemsDrawer/index.tsx",
                                    lineNumber: 182,
                                    columnNumber: 19
                                }, this),
                                /*#__PURE__*/ _jsxDEV("ul", {
                                    className: `${baseClass}__items`,
                                    children: groupItems.map((_item, index)=>{
                                        const item = typeof _item === 'string' ? config.blocksMap?.[_item] : _item;
                                        if (!item) {
                                            return null;
                                        }
                                        const { imageAltText, imageURL } = getItemImageInfo(item);
                                        const displayLabel = getItemDisplayLabel(item, i18n);
                                        return /*#__PURE__*/ _jsxDEV("li", {
                                            className: `${baseClass}__item`,
                                            children: /*#__PURE__*/ _jsxDEV(ThumbnailCard, {
                                                alignLabel: "center",
                                                label: displayLabel,
                                                onClick: ()=>{
                                                    void onItemClick(item, addRowIndex);
                                                    closeModal(drawerSlug);
                                                },
                                                thumbnail: /*#__PURE__*/ _jsxDEV("div", {
                                                    className: `${baseClass}__default-image`,
                                                    children: imageURL ? /*#__PURE__*/ _jsxDEV("img", {
                                                        alt: imageAltText,
                                                        src: imageURL
                                                    }, void 0, false, {
                                                        fileName: "src/elements/ItemsDrawer/index.tsx",
                                                        lineNumber: 208,
                                                        columnNumber: 33
                                                    }, void 0) : /*#__PURE__*/ _jsxDEV(DefaultBlockImage, {}, void 0, false, {
                                                        fileName: "src/elements/ItemsDrawer/index.tsx",
                                                        lineNumber: 210,
                                                        columnNumber: 33
                                                    }, void 0)
                                                }, void 0, false, {
                                                    fileName: "src/elements/ItemsDrawer/index.tsx",
                                                    lineNumber: 206,
                                                    columnNumber: 29
                                                }, void 0)
                                            }, void 0, false, {
                                                fileName: "src/elements/ItemsDrawer/index.tsx",
                                                lineNumber: 198,
                                                columnNumber: 25
                                            }, this)
                                        }, index, false, {
                                            fileName: "src/elements/ItemsDrawer/index.tsx",
                                            lineNumber: 197,
                                            columnNumber: 23
                                        }, this);
                                    })
                                }, void 0, false, {
                                    fileName: "src/elements/ItemsDrawer/index.tsx",
                                    lineNumber: 184,
                                    columnNumber: 17
                                }, this)
                            ]
                        }, groupLabel, true, {
                            fileName: "src/elements/ItemsDrawer/index.tsx",
                            lineNumber: 172,
                            columnNumber: 15
                        }, this))
                }, void 0, false, {
                    fileName: "src/elements/ItemsDrawer/index.tsx",
                    lineNumber: 169,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/ItemsDrawer/index.tsx",
                lineNumber: 168,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/ItemsDrawer/index.tsx",
        lineNumber: 163,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map