import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { AutoComplete, Form, Input } from 'antd';

export interface InputSearchProps {
  onSearch: (filter: any) => void;
  onClear?: () => void;
  [key: string]: any;
  placeholder?: string | undefined;
  forwardRef?: React.Ref<{ setQuery: (filter: string) => void; clear: () => void }>;
}

const InputSearch: React.FC<InputSearchProps> = forwardRef(
  ({ onSearch, onClear, placeholder='Search by Name/Contact', forwardRef, ...rest }, ref) => {
    const [searchQuery, setSearchQuery] = useState<string>('');

    const handleSearchChange = (value: string): void => {
      setSearchQuery(value);
    };

    const handleClear = (): void => {
      setSearchQuery('');
      if (onClear) {
        onClear();
      }
      onSearch(''); //do not remove this or this component will not work
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === 'Enter') {
        onSearch(searchQuery);
      }
    };

    useImperativeHandle(
      forwardRef || ref,
      () => ({
        setQuery: (filterVal: string) => {
          setSearchQuery(filterVal);
        },
        clear: handleClear,
      }),
      []
    );

    return (
      <Form.Item className="mb-0">
        <AutoComplete
          value={searchQuery}
          allowClear
          onClear={handleClear}
          onChange={handleSearchChange}
          className="input-search-by-name"
          style={{ width: 200, marginLeft: 10 }}
          {...rest}
        >
          <Input
            placeholder={placeholder}
            onKeyDown={handleKeyDown}
          />
        </AutoComplete>
      </Form.Item>
    );
  }
);

InputSearch.displayName = 'InputSearch';
export default InputSearch;