import React, { useMemo, useState, useEffect } from 'react';
import { Input } from 'antd';
import { debounce } from 'lodash';
import { SearchOutlined } from '@ant-design/icons';

export default function SearchInput({
  handleChange,
  defaultValue,
  resetSearch,
  className,
  ...props
}) {
  const [searchTerm, setSearchTerm] = useState(defaultValue);

  const debounceSearch = useMemo(() => {
    const loadOptions = (value) => {
      handleChange(value);
    };
    return debounce(loadOptions, 800);
  }, [handleChange]);

  useEffect(() => {
    setSearchTerm(defaultValue);
  }, [resetSearch, defaultValue]);

  return (
    <Input
      value={searchTerm}
      onChange={(event) => {
        setSearchTerm(event.target.value);
        debounceSearch(event.target.value);
      }}
      prefix={<SearchOutlined />}
      {...props}
      className={
        searchTerm?.length > 0
          ? `search-outlined ${className}`
          : `search-outlined-none ${className}`
      }
    />
  );
}
