import React, { useEffect, useState } from 'react';
import { CollectionFilterState, DropdownCollectionFilterState, } from '../../state';
import { observer } from 'mobx-react-lite';
import { SingleSelectFilterBase, } from '../SingleSelectFilterBase';
import { useBuildGroupedOptions, 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 _SingleSelectFilter(props) {
    const { filter, collection, renderItem, renderSection, ...rest } = props;
    const container = useWixPatternsContainer();
    const toolbar = useFilterToolbarState();
    const [collectionFilter] = useState(() => new CollectionFilterState({
        collection,
        filter,
    }));
    const [{ dropdownSelect, init }] = useState(() => new DropdownCollectionFilterState({
        collectionFilter,
        resetOnClose: false,
        container,
        toolbar,
    }));
    const { query: { search }, } = collection;
    const { skipInitialFetch, onFocus } = useCollectionFilterInitialFetchTiming(props);
    useEffect(() => init({ skipInitialFetch }), []);
    const { result: { keyedItems }, fetchedLastPage, } = collection;
    const options = useBuildGroupedOptions({
        items: keyedItems.map(useBuildOption({
            filter,
            renderItem,
        })),
        renderSection,
    });
    const { fixedFooter, showInitialLoader } = useFilterCollectionStates({
        collection,
        fixedFooter: rest.fixedFooter,
    });
    return (React.createElement(SingleSelectFilterBase, { ...rest, fixedFooter: fixedFooter, infiniteScroll: true, value: search.value, onChange: (e) => {
            collection.search(e.target.value, { clearResult: true });
        }, onFocus: onFocus, filter: filter, options: options, renderItem: renderItem, dropdownSelect: dropdownSelect, hasMore: !showInitialLoader && !fetchedLastPage, loadMore: collection.fetchNextPageIfNeeded }));
}
const SingleSelectFilterInternal = observer(_SingleSelectFilter);
export function SingleSelectFilter(props) {
    return (React.createElement(FilterTranslationProvider, null,
        React.createElement(SingleSelectFilterInternal, { ...props })));
}
//# sourceMappingURL=SingleSelectFilter.js.map