import React, { Fragment, useEffect, useMemo, useState, } from 'react';
import { useFiltersLayout } from './useFiltersLayout';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { AppliedFiltersTagList } from '../AppliedFiltersTagList';
import { observer } from 'mobx-react-lite';
import { ToolbarItemBox } from '../ToolbarItemBox';
import { AppliedFiltersTagListState } from '../AppliedFiltersTagList/AppliedFiltersTagListState';
import { CollectionToolbarFiltersState } from './CollectionToolbarFiltersState';
import { CollectionFilter } from '../CollectionFilter';
import { FiltersPanelSidePanelEntry } from './FiltersPanelSidePanelEntry';
import { MoreFiltersCTA } from '../MoreFiltersCTA';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useFiltersSyncProps } from './useFiltersSyncProps';
function _CollectionToolbarFilters(props) {
    const { children, inline = 2, maxInlineFilters, maxInlineLabels, panelTitle, onPanelClearButtonClicked, onSearchAppliedFilterTagRemove, onSubToolbarClearButtonClicked, hideAppliedFiltersTagList, useNewFilters, } = props;
    const childrenArr = useFiltersSyncProps(children);
    const state = useToolbarCollectionContext();
    const [toolbarFiltersState] = useState(() => {
        state.toolbarFiltersState ??= new CollectionToolbarFiltersState({
            toolbar: state,
        });
        state.setToolbarFiltersStateInitialized(true);
        return state.toolbarFiltersState;
    });
    useEffect(() => {
        state.panels.registerSidePanel('filters', FiltersPanelSidePanelEntry);
    }, []);
    useEffect(() => {
        toolbarFiltersState.onClearButtonClicked = onPanelClearButtonClicked;
    }, [onPanelClearButtonClicked]);
    const forceShowSidePanel = useMemo(() => !!childrenArr.slice(0, inline).find((filter) => {
        return (filter.type.displayName &&
            [
                'DateRangeFilter',
                'MultiSelectCollectionFilter',
                'RadioGroupFilter',
                'MultiInlineCheckboxFilter',
            ].includes(filter.type.displayName));
    }), [childrenArr]);
    const { viewsProps, collection } = state;
    const customInlineElements = viewsProps ? 1 : 0;
    const { showFiltersPanelButton, totalInlineFilters, showLabels } = useFiltersLayout({
        useNewFilters,
        filters: childrenArr.length,
        totalFilters: childrenArr.length + customInlineElements,
        inline,
        maxInlineFilters,
        maxInlineLabels,
        customInlineElements,
        forceShowSidePanel,
    });
    useEffect(() => {
        toolbarFiltersState.panelTitle.set(panelTitle);
    }, [panelTitle]);
    useEffect(() => {
        toolbarFiltersState.totalInlineFilters.set(totalInlineFilters);
    }, [totalInlineFilters]);
    useEffect(() => {
        toolbarFiltersState.filterElements.set(childrenArr);
    }, [childrenArr]);
    const container = useWixPatternsContainer();
    const { filters } = collection;
    const filtersProps = useMemo(() => {
        // share essential filter props globally
        return [
            ...childrenArr.map(({ props: filterChildProps, type }) => {
                const { filter, onAppliedFilterTagRemove, renderToolbarTag, toolbarTagProps, accordionItemProps, } = filterChildProps;
                return {
                    filter,
                    onAppliedFilterTagRemove,
                    toolbarTagProps,
                    accordionItemProps,
                    renderToolbarTag: renderToolbarTag ??
                        type.renderPresetToolbarTag?.(container, {
                            filterProps: filterChildProps,
                        }),
                };
            }),
            {
                filter: filters.search,
                onAppliedFilterTagRemove: onSearchAppliedFilterTagRemove,
            },
        ];
    }, childrenArr.map(({ props: { filter } }) => filter));
    useEffect(() => {
        state.setFilterTagsPropsIfChanged(filtersProps);
        return () => {
            state.setFilterTagsPropsIfChanged(null);
        };
    }, [filtersProps]);
    useEffect(() => {
        if (showFiltersPanelButton) {
            state.featuredComponents.moreFiltersButton.set(() => React.createElement(MoreFiltersCTA, null));
            return () => {
                state.featuredComponents.moreFiltersButton.set(null);
            };
        }
        state.featuredComponents.moreFiltersButton.set(null);
        return;
    }, [showFiltersPanelButton]);
    const [tagListState] = useState(() => new AppliedFiltersTagListState({
        table: state,
    }));
    useEffect(() => {
        const disposers = [tagListState.init()];
        if (hideAppliedFiltersTagList) {
            state.featuredComponents.appliedFiltersTagList.set(null);
        }
        else {
            state.featuredComponents.appliedFiltersTagList.set({
                state: tagListState,
                component: () => (React.createElement(AppliedFiltersTagList, { state: tagListState, onClearButtonClicked: onSubToolbarClearButtonClicked })),
            });
        }
        return () => {
            disposers.forEach((d) => d());
            state.featuredComponents.appliedFiltersTagList.set(null);
        };
    }, [hideAppliedFiltersTagList]);
    return (
    // workaround to support bad enzyme version not detecting this as a valid fragment component
    // https://wix.slack.com/archives/C02K83200PL/p1671962461443749
    React.createElement(Fragment, { key: "toolbar-items" }, childrenArr.slice(0, totalInlineFilters).map((element, index) => {
        const { props: filterProps } = element;
        return (React.createElement(ToolbarItemBox, { key: index, layout: filterProps.layout, dataHook: `toolbar-item-filter-${index}`, label: showLabels && filterProps.toolbarItemProps?.label }, filterProps.filter ? (React.createElement(CollectionFilter, { filter: filterProps.filter, state: toolbarFiltersState }, element)) : (element)));
    })));
}
export const CollectionToolbarFilters = observer(_CollectionToolbarFilters);
//# sourceMappingURL=CollectionToolbarFilters.js.map