'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React, { Fragment, useEffect, useMemo, useState } from 'react';
import { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js';
import { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js';
import { useControllableState } from '../../../hooks/useControllableState.js';
import { useConfig } from '../../../providers/Config/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { BlockSearch } from './BlockSearch/index.js';
import './index.scss';
/**
   * Control the search term state externally
   */ const baseClass = 'blocks-drawer';
const getBlockLabel = (block, i18n)=>{
    if (typeof block.labels.singular === 'string') {
        return block.labels.singular.toLowerCase();
    }
    if (typeof block.labels.singular === 'object') {
        return getTranslation(block.labels.singular, i18n).toLowerCase();
    }
    return '';
};
export const BlockSelector = (props)=>{
    const { blocks, onSelect, searchTerm: searchTermFromProps } = props;
    const [searchTerm, setSearchTerm] = useControllableState(searchTermFromProps ?? '');
    const [filteredBlocks, setFilteredBlocks] = useState(blocks);
    const { i18n } = useTranslation();
    const { config } = useConfig();
    const blockGroups = useMemo(()=>{
        const groups = {
            _none: []
        };
        filteredBlocks.forEach((block)=>{
            if (typeof block === 'object' && block.admin?.group) {
                const group = block.admin.group;
                const label = typeof group === 'string' ? group : getTranslation(group, i18n);
                if (Object.hasOwn(groups, label)) {
                    groups[label].push(block);
                } else {
                    groups[label] = [
                        block
                    ];
                }
            } else {
                groups._none.push(block);
            }
        });
        return groups;
    }, [
        filteredBlocks,
        i18n
    ]);
    useEffect(()=>{
        const searchTermToUse = searchTerm.toLowerCase();
        const matchingBlocks = blocks?.reduce((matchedBlocks, _block)=>{
            const block = typeof _block === 'string' ? config.blocksMap[_block] : _block;
            const blockLabel = getBlockLabel(block, i18n);
            if (blockLabel.includes(searchTermToUse)) {
                matchedBlocks.push(block);
            }
            return matchedBlocks;
        }, []);
        setFilteredBlocks(matchingBlocks);
    }, [
        searchTerm,
        blocks,
        i18n,
        config.blocksMap
    ]);
    return /*#__PURE__*/ _jsxDEV(Fragment, {
        children: [
            /*#__PURE__*/ _jsxDEV(BlockSearch, {
                setSearchTerm: setSearchTerm
            }, void 0, false, {
                fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                lineNumber: 86,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__blocks-wrapper`,
                children: /*#__PURE__*/ _jsxDEV("ul", {
                    className: `${baseClass}__block-groups`,
                    children: Object.entries(blockGroups).map(([groupLabel, groupBlocks])=>!groupBlocks.length ? null : /*#__PURE__*/ _jsxDEV("li", {
                            className: [
                                `${baseClass}__block-group`,
                                groupLabel === '_none' && `${baseClass}__block-group-none`
                            ].filter(Boolean).join(' '),
                            children: [
                                groupLabel !== '_none' && /*#__PURE__*/ _jsxDEV("h3", {
                                    className: `${baseClass}__block-group-label`,
                                    children: groupLabel
                                }, void 0, false, {
                                    fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                    lineNumber: 101,
                                    columnNumber: 19
                                }, this),
                                /*#__PURE__*/ _jsxDEV("ul", {
                                    className: `${baseClass}__blocks`,
                                    children: groupBlocks.map((_block, index)=>{
                                        const block = typeof _block === 'string' ? config.blocksMap[_block] : _block;
                                        const { slug, imageAltText, imageURL, labels: blockLabels } = block;
                                        return /*#__PURE__*/ _jsxDEV("li", {
                                            className: `${baseClass}__block`,
                                            children: /*#__PURE__*/ _jsxDEV(ThumbnailCard, {
                                                alignLabel: "center",
                                                label: getTranslation(blockLabels?.singular, i18n),
                                                onClick: ()=>{
                                                    if (typeof onSelect === 'function') {
                                                        onSelect(slug);
                                                    }
                                                },
                                                thumbnail: /*#__PURE__*/ _jsxDEV("div", {
                                                    className: `${baseClass}__default-image`,
                                                    children: imageURL ? /*#__PURE__*/ _jsxDEV("img", {
                                                        alt: imageAltText,
                                                        src: imageURL
                                                    }, void 0, false, {
                                                        fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                                        lineNumber: 122,
                                                        columnNumber: 33
                                                    }, void 0) : /*#__PURE__*/ _jsxDEV(DefaultBlockImage, {}, void 0, false, {
                                                        fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                                        lineNumber: 124,
                                                        columnNumber: 33
                                                    }, void 0)
                                                }, void 0, false, {
                                                    fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                                    lineNumber: 120,
                                                    columnNumber: 29
                                                }, void 0)
                                            }, void 0, false, {
                                                fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                                lineNumber: 111,
                                                columnNumber: 25
                                            }, this)
                                        }, index, false, {
                                            fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                            lineNumber: 110,
                                            columnNumber: 23
                                        }, this);
                                    })
                                }, void 0, false, {
                                    fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                                    lineNumber: 103,
                                    columnNumber: 17
                                }, this)
                            ]
                        }, groupLabel, true, {
                            fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                            lineNumber: 91,
                            columnNumber: 15
                        }, this))
                }, void 0, false, {
                    fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                    lineNumber: 88,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/fields/Blocks/BlockSelector/index.tsx",
                lineNumber: 87,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Blocks/BlockSelector/index.tsx",
        lineNumber: 85,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map