import React, { useMemo } from 'react';
import { TagList } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
function _AppliedFiltersTagList(props) {
    const { state, onClearButtonClicked, ...rest } = props;
    const { table, tags } = state;
    const { collection } = table;
    const { translate: t } = collection;
    const tagsMap = useMemo(() => new Map(tags.map((tag) => [tag.id, tag])), [tags]);
    return (React.createElement(TagList, { dataHook: "active-filter-tags", tags: tags, onTagRemove: (tagId) => {
            const tag = tagsMap.get(tagId);
            if (tag != null) {
                const { values, filter, filterProps } = tag;
                state.onTagRemove(filter, values, filterProps?.onAppliedFilterTagRemove);
            }
        }, size: "small", maxVisibleTags: Infinity, actionButton: {
            label: t('cairo.clear'),
            onClick: () => {
                state.onClearButtonClick();
                onClearButtonClicked?.();
            },
        }, ...rest }));
}
export const AppliedFiltersTagList = observer(_AppliedFiltersTagList);
//# sourceMappingURL=AppliedFiltersTagList.js.map