import { useWixPatternsContainer } from '@wix/bex-core/react';
import React, { useCallback } from 'react';
import { Box, accordionSectionItemBuilder, } from '@wix/design-system';
import { CollectionFilter } from '../components/CollectionFilter';
import { FilterAccordionResetButton } from '../components/FiltersPanel/FilterAccordionResetButton';
import { FilterAccordionTitle } from '../components/FiltersPanel/FilterAccordionTitle';
import { getFieldTypeIcon } from '../utils/fieldTypePrefixIcons';
function useBuildAccordionItem(state, showFieldTypeIcons) {
    return useCallback((filterElement) => {
        const { type: Component, props: filterProps } = filterElement;
        const { filter, initiallyOpen, popoverProps, accordionItemProps, fieldType, } = filterProps;
        const clonedElement = (React.createElement(Component, { ...filterProps, popoverProps: { appendTo: 'window', ...popoverProps } }));
        const titleElement = (React.createElement(FilterAccordionTitle, { state: state.toolbar, filter: filter, filterProps: filterProps }));
        const titleWithIcon = showFieldTypeIcons ? (React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
            getFieldTypeIcon({ fieldType, size: 'medium' }),
            titleElement)) : (titleElement);
        const title = filterProps.filter ? (React.createElement(Box, { width: "100%", align: "space-between", verticalAlign: "middle" },
            titleWithIcon,
            React.createElement(FilterAccordionResetButton, { state: state.toolbar, filter: filterProps.filter }))) : (titleWithIcon);
        return {
            title,
            children: filterProps.filter ? (React.createElement(CollectionFilter, { filter: filterProps.filter, state: state }, clonedElement)) : (clonedElement),
            initiallyOpen,
            ...accordionItemProps,
        };
    }, [showFieldTypeIcons]);
}
export function useBuildAccordionItems(state, searchTerm = '') {
    const { translate: t } = useWixPatternsContainer();
    const { panelFilterElements } = state;
    const showFieldTypeIcons = state.toolbar.showFieldTypeIcons;
    const buildAccordionItem = useBuildAccordionItem(state, showFieldTypeIcons);
    const defaultSectionTitle = t('cairo.filtersPanel.sections.default.title');
    const term = searchTerm.trim().toLowerCase();
    const elements = term
        ? panelFilterElements.filter((el) => {
            const label = (el.props?.accordionItemProps?.label ?? '').toLowerCase();
            const section = (el.props?.sectionTitle ?? '').toLowerCase();
            return label.includes(term) || section.includes(term);
        })
        : panelFilterElements;
    const { groups, defaultGroup } = elements.reduce((accumulator, item) => {
        const sectionTitle = item.props?.sectionTitle;
        if (!sectionTitle) {
            return {
                ...accumulator,
                defaultGroup: [...accumulator.defaultGroup, buildAccordionItem(item)],
            };
        }
        const groupItems = accumulator.groups[sectionTitle]
            ? [...accumulator.groups[sectionTitle], buildAccordionItem(item)]
            : [
                accordionSectionItemBuilder({ title: sectionTitle }),
                buildAccordionItem(item),
            ];
        return {
            ...accumulator,
            groups: {
                ...accumulator.groups,
                [sectionTitle]: groupItems,
            },
        };
    }, {
        groups: {},
        defaultGroup: [],
    });
    const items = Object.values(groups).flat();
    if (!items.length) {
        return defaultGroup;
    }
    return [
        ...items,
        ...(defaultGroup.length
            ? [
                accordionSectionItemBuilder({ title: defaultSectionTitle }),
                ...defaultGroup,
            ]
            : []),
    ];
}
//# sourceMappingURL=useBuildAccordionItems.js.map