import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import {
  CollectionAutoComplete,
  CollectionAutoCompleteProps,
} from '../CollectionAutoComplete';
import { FilterTranslationProvider } from '../../providers';

export interface AutoCompleteFilterProps<V, F extends FiltersMap>
  extends Omit<
    CollectionAutoCompleteProps<V, F>,
    'noResultsText' | 'emptyStateText'
  > {}

function _AutoCompleteFilter<V, F extends FiltersMap>(
  props: Omit<
    AutoCompleteFilterProps<V, F>,
    'emptyStateText' | 'noResultsText'
  >,
) {
  return (
    <FilterTranslationProvider>
      <CollectionAutoComplete {...props} />
    </FilterTranslationProvider>
  );
}

export const AutoCompleteFilter = observer(_AutoCompleteFilter);