"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const BlockCard_1 = tslib_1.__importDefault(require("../../components/BlockCard/BlockCard.js"));
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.editorCn)('blocks-list');
const BlocksList = ({ className }) => {
    const { blocks, enableInsertMode } = (0, useMainEditorStore_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('search'), children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "m", hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('search-icon'), data: icons_1.Magnifier }) }), (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: [
                            {
                                action: expandAll,
                                text: 'Раскрыть все',
                                iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.FolderOpen }),
                                disabled: allGroupsExpanded,
                            },
                            {
                                action: collapseAll,
                                text: 'Свернуть все',
                                iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Folder }),
                                disabled: allGroupsCollapsed,
                            },
                            {
                                action: () => setShowHidden(!showHidden),
                                text: showHidden ? 'Скрыть скрытые' : 'Показать скрытые',
                                iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: showHidden ? icons_1.EyeSlash : icons_1.Eye }),
                            },
                        ] })] }), Object.entries(groups).map(([key, groupBlocks]) => {
                const isCollapsed = collapsedGroups.has(key);
                return ((0, jsx_runtime_1.jsxs)("div", { className: b('group', { collapsed: isCollapsed }), children: [(0, jsx_runtime_1.jsxs)("button", { className: b('title'), onClick: () => toggleGroup(key), type: "button", children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('title-icon'), data: isCollapsed ? icons_1.ChevronRight : icons_1.ChevronDown, size: 14 }), key] }), !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => ((0, jsx_runtime_1.jsx)(BlockCard_1.default, { type: type, name: name, previewImg: previewImg, onMouseDown: onMouseDown }, type))) }))] }, key));
            })] }));
};
exports.default = BlocksList;
//# sourceMappingURL=BlocksList.js.map
