import React, { useEffect } from 'react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MultiSelectCheckboxFilter } from '../MultiSelectCheckboxFilter';
import { useFilterCollection } from '../../hooks/useFilterCollection';
import { observer } from 'mobx-react-lite';
export const _TagsFilter = ({ filter }) => {
    const toolbarState = useToolbarCollectionContext();
    const { translate: t } = useWixPatternsContainer();
    const tagsFilterCollection = useFilterCollection(filter, {
        queryName: [
            toolbarState.tagsCollectionState?.tagsManagementState.fqdnString,
            'tags',
            'filter',
        ].join('/'),
        fetchData: async ({ search = '' }) => {
            const filteredItems = (toolbarState.tagsCollectionState?.tagsManagementState.items || []).filter((tag) => tag.name?.toLowerCase().includes(search.toLowerCase()));
            return {
                items: filteredItems,
                total: filteredItems.length,
            };
        },
    });
    useEffect(() => {
        if (toolbarState.tagsCollectionState?.tagsManagementState.items) {
            tagsFilterCollection.refreshAllPages();
        }
    }, [toolbarState.tagsCollectionState?.tagsManagementState.items]);
    if (!toolbarState.tagsCollectionState) {
        return null;
    }
    return (React.createElement(MultiSelectCheckboxFilter, { collection: tagsFilterCollection, filter: filter, popoverProps: { appendTo: 'window' }, placeholder: t('cairo.tags.filterPanel.dropdown.placeholder'), renderItem: (tag) => ({
            title: tag.name,
            id: tag.id,
        }) }));
};
export const TagsFilter = observer(_TagsFilter);
//# sourceMappingURL=TagsFilter.js.map