import { observer } from 'mobx-react-lite';
import { Search, SearchProps } from '@wix/design-system';
import React, { CSSProperties } from 'react';
import { Filter } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface QuerySearchProps extends Partial<SearchProps> {
  visibility?: CSSProperties['visibility'];
  state: Filter<string>;
}

export const QuerySearch = observer(function QuerySearch({
  state,
  visibility,
  ...rest
}: QuerySearchProps) {
  const { translate: t } = useWixPatternsContainer();

  return (
    <Search
      dataHook="collection-search"
      debounceMs={300}
      onChange={(e) => {
        const value = e.target.value;
        state.changeValue(value);
      }}
      value={state.value}
      onClear={() => {
        state.changeValue('');
      }}
      placeholder={t('cairo.searchPlaceholder')}
      {...rest}
    />
  );
});