import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ChevronDown, ChevronRight, Eye, EyeSlash, Folder, FolderOpen, Magnifier, } from '@gravity-ui/icons';
import { DropdownMenu, Icon, TextInput } from '@gravity-ui/uikit';
import BlockCard from "../../components/BlockCard/BlockCard.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { editorCn } from "../../utils/cn.js";
import './BlocksList.css';
const b = editorCn('blocks-list');
const BlocksList = ({ className }) => {
    const { blocks, enableInsertMode } = useMainEditorStore();
    const [search, setSearch] = React.useState('');
    const [collapsedGroups, setCollapsedGroups] = React.useState(new Set());
    const [showHidden, setShowHidden] = React.useState(false);
    const onMouseDown = React.useCallback((blockType) => {
        enableInsertMode(blockType);
    }, [enableInsertMode]);
    const toggleGroup = React.useCallback((groupKey) => {
        setCollapsedGroups((prev) => {
            const newSet = new Set(prev);
            if (newSet.has(groupKey)) {
                newSet.delete(groupKey);
            }
            else {
                newSet.add(groupKey);
            }
            return newSet;
        });
    }, []);
    const expandAll = React.useCallback(() => {
        setCollapsedGroups(new Set());
    }, []);
    const groups = React.useMemo(() => {
        const blocksGroups = blocks.reduce((acc, currentBlock) => {
            const group = currentBlock.schema.group;
            if (!showHidden && currentBlock.schema.hidden) {
                return acc;
            }
            if (search &&
                currentBlock.type.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
                currentBlock.schema.name.toLowerCase().indexOf(search.toLowerCase()) === -1) {
                return acc;
            }
            if (group) {
                if (!acc[group]) {
                    /* eslint-disable no-param-reassign */
                    acc[group] = [];
                }
                acc[group].push(currentBlock);
            }
            else {
                if (!acc['Other']) {
                    /* eslint-disable no-param-reassign */
                    acc['Other'] = [];
                }
                acc['Other'].push(currentBlock);
            }
            return acc;
        }, {});
        return Object.keys(blocksGroups)
            .sort()
            .reduce((sortedGroups, key) => {
            sortedGroups[key] = blocksGroups[key];
            return sortedGroups;
        }, {});
    }, [blocks, search, showHidden]);
    const collapseAll = React.useCallback(() => {
        setCollapsedGroups(new Set(Object.keys(groups)));
    }, [groups]);
    const allGroupsExpanded = collapsedGroups.size === 0;
    const allGroupsCollapsed = collapsedGroups.size === Object.keys(groups).length;
    return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('search'), children: [_jsx(TextInput, { size: "m", hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: _jsx(Icon, { className: b('search-icon'), data: Magnifier }) }), _jsx(DropdownMenu, { items: [
                            {
                                action: expandAll,
                                text: 'Раскрыть все',
                                iconStart: _jsx(Icon, { data: FolderOpen }),
                                disabled: allGroupsExpanded,
                            },
                            {
                                action: collapseAll,
                                text: 'Свернуть все',
                                iconStart: _jsx(Icon, { data: Folder }),
                                disabled: allGroupsCollapsed,
                            },
                            {
                                action: () => setShowHidden(!showHidden),
                                text: showHidden ? 'Скрыть скрытые' : 'Показать скрытые',
                                iconStart: _jsx(Icon, { data: showHidden ? EyeSlash : Eye }),
                            },
                        ] })] }), Object.entries(groups).map(([key, groupBlocks]) => {
                const isCollapsed = collapsedGroups.has(key);
                return (_jsxs("div", { className: b('group', { collapsed: isCollapsed }), children: [_jsxs("button", { className: b('title'), onClick: () => toggleGroup(key), type: "button", children: [_jsx(Icon, { className: b('title-icon'), data: isCollapsed ? ChevronRight : ChevronDown, size: 14 }), key] }), !isCollapsed && (_jsx("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => (_jsx(BlockCard, { type: type, name: name, previewImg: previewImg, onMouseDown: onMouseDown }, type))) }))] }, key));
            })] }));
};
export default BlocksList;
//# sourceMappingURL=BlocksList.js.map
