import { Box, Text, TextButton } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { runInAction } from 'mobx';
function _FiltersPanelAppliedFiltersSection(props) {
    const { state, onClearButtonClicked } = props;
    const { collection } = state;
    const { translate: t, query } = collection;
    const { nonPersistentCustomFiltersCount } = query;
    return (React.createElement(React.Fragment, null,
        React.createElement(Text, { weight: "bold", dataHook: "applied-filters", size: "small" }, t('cairo.appliedFilters', {
            num: nonPersistentCustomFiltersCount,
        })),
        React.createElement(Box, { align: "right", flex: 1 },
            React.createElement(TextButton, { dataHook: "clear-all-filters", size: "small", onClick: () => {
                    runInAction(() => {
                        const { query: { nonPersistentCustomFilters }, } = collection;
                        collection.emitter.emit('beforeClearFilters', {
                            origin: 'sidebar',
                        });
                        nonPersistentCustomFilters
                            .filter((filter) => !filter._hideFromToolbar)
                            .forEach((filter) => {
                            filter?.reset({ emitEvents: ['change', 'refresh'] });
                        });
                    });
                    onClearButtonClicked?.();
                    state.sidePanel.focus.modalElement?.focus();
                }, disabled: !nonPersistentCustomFiltersCount }, t('cairo.clear')))));
}
export const FiltersPanelAppliedFiltersSection = observer(_FiltersPanelAppliedFiltersSection);
//# sourceMappingURL=FiltersPanelAppliedFiltersSection.js.map