import React, { useEffect, useState } from 'react';
import { CollectionFilterState, DropdownCollectionFilterState, } from '../../state';
import { observer } from 'mobx-react-lite';
import { MultiSelectFilterBase, } from '../MultiSelectFilterBase';
import { useBuildOption } from '../../hooks';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useFilterToolbarState, FilterTranslationProvider, } from '../../providers';
import { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';
import { useCollectionFilterInitialFetchTiming, } from '../../hooks/useCollectionFilterInitialFetchTiming';
function _MultiSelectCollectionFilter(props) {
    const { filter, collection, renderItem, initialFetchTiming, ...rest } = props;
    const container = useWixPatternsContainer();
    const toolbar = useFilterToolbarState();
    const buildOption = useBuildOption({
        filter,
        renderItem,
    });
    const [collectionFilter] = useState(() => new CollectionFilterState({
        collection,
        filter,
    }));
    const [{ dropdownSelect, init }] = useState(() => new DropdownCollectionFilterState({
        collectionFilter,
        resetOnClose: true,
        container,
        toolbar,
    }));
    const { query: { search }, } = collection;
    const { skipInitialFetch, onFocus } = useCollectionFilterInitialFetchTiming(props);
    useEffect(() => init({ skipInitialFetch }), []);
    const { result: { keyedItems }, fetchedLastPage, } = collection;
    const options = keyedItems.map(buildOption);
    const { fixedFooter, showInitialLoader } = useFilterCollectionStates({
        collection,
        fixedFooter: rest.fixedFooter,
    });
    return (React.createElement(MultiSelectFilterBase, { ...rest, fixedFooter: fixedFooter, infiniteScroll: true, value: search.value, onChange: (e) => {
            collection.search(e.target.value);
        }, onFocus: onFocus, filter: filter, dropdownSelect: dropdownSelect, options: options, hasMore: !showInitialLoader && !fetchedLastPage, loadMore: collection.fetchNextPageIfNeeded }));
}
const MultiSelectCollectionFilterInternal = observer(_MultiSelectCollectionFilter);
export function MultiSelectCollectionFilter(props) {
    return (React.createElement(FilterTranslationProvider, null,
        React.createElement(MultiSelectCollectionFilterInternal, { ...props })));
}
MultiSelectCollectionFilter.displayName = 'MultiSelectCollectionFilter';
//# sourceMappingURL=MultiSelectCollectionFilter.js.map