import { debounce } from 'lodash';
import { useEffect, useMemo, useState } from 'react';

import { t } from '@grafana/i18n';
import { Icon, Input } from '@grafana/ui';

import { selectors } from '../../e2e/selectors';

const Search = ({ searchFn }: { searchFn: (searchPhrase: string) => void }) => {
  const [searchFilter, setSearchFilter] = useState('');

  const debouncedSearch = useMemo(() => debounce(searchFn, 600), [searchFn]);
  useEffect(() => {
    return () => {
      // Stop the invocation of the debounced function after unmounting
      debouncedSearch.cancel();
    };
  }, [debouncedSearch]);

  return (
    <Input
      aria-label={t('components.search.aria-label-resource-search', 'Resource search')}
      prefix={<Icon name="search" />}
      value={searchFilter}
      onChange={(event) => {
        const searchPhrase = event.currentTarget.value;
        setSearchFilter(searchPhrase);
        debouncedSearch(searchPhrase);
      }}
      placeholder={t('components.search.placeholder-resource-search', 'Search for a resource')}
      data-testid={selectors.components.queryEditor.resourcePicker.search.input}
      style={{ marginBottom: '10px' }}
    />
  );
};

export default Search;
