import React, { useEffect, useState } from 'react';
import { CollectionFilterState } from '../../state';
import { observer } from 'mobx-react-lite';
import { AutoComplete, } from '@wix/design-system';
import { useBuildGroupedOptions, useBuildOption } from '../../hooks';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useFilterToolbarState, useDropdownTranslationContext, } from '../../providers';
import { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';
import { AutoCompleteFilterState } from '../AutoCompleteFilter/AutoCompleteFilterState';
function _CollectionAutoComplete(props) {
    const { filter, collection, renderItem, renderSection, onSelect, onClear, readOnly, placeholder, ...rest } = props;
    const container = useWixPatternsContainer();
    const toolbar = useFilterToolbarState();
    const [collectionFilter] = useState(() => new CollectionFilterState({
        collection,
        filter,
    }));
    const [state] = useState(() => new AutoCompleteFilterState({
        collectionFilter,
        resetOnClose: false,
        container,
        toolbar,
    }));
    const { translate } = useDropdownTranslationContext();
    useEffect(() => {
        return state.init();
    }, []);
    const { result: { keyedItems }, fetchedLastPage, } = collection;
    const buildOption = useBuildOption({
        filter,
        renderItem,
    });
    const builtOptions = keyedItems.map(buildOption);
    const options = useBuildGroupedOptions({
        items: builtOptions,
        renderSection,
    });
    const { fixedFooter, showInitialLoader } = useFilterCollectionStates({
        collection,
        fixedFooter: rest.fixedFooter,
    });
    return (React.createElement(AutoComplete, { dataHook: `collection-filter-${filter.name}`, closeOnSelect: true, border: "round", options: options, onClose: () => {
            state.dropdown.dropdownSelect.close();
            state.onInputBlur();
        }, onBlur: state.onInputBlur, readOnly: readOnly, clearButton: !readOnly, onClear: !readOnly
            ? (e) => {
                onClear?.(e);
                state.clearSelectionAndSearch();
            }
            : undefined, placeholder: placeholder ?? translate('placeholder'), onSelect: (option, sameOptionWasPicked) => {
            const { keyedItem } = option;
            state.dropdown.dropdownSelect.setSingle(keyedItem);
            onSelect?.(option, sameOptionWasPicked);
            state.searchInputValue = state.collection.itemName(keyedItem.item);
        }, infiniteScroll: true, value: state.searchInputValue, onChange: (e) => {
            state.searchInputValue = e.target.value;
            collection.search(e.target.value, { clearResult: true });
        }, hasMore: !showInitialLoader && !fetchedLastPage, loadMore: collection.fetchNextPageIfNeeded, ...rest, fixedFooter: fixedFooter }));
}
export const CollectionAutoComplete = observer(_CollectionAutoComplete);
//# sourceMappingURL=CollectionAutoComplete.js.map