import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
import useDebounce from "../../hooks/useDebounce";

interface SearchBoxProps {
  setSortAndFilterOptions: Dispatch<SetStateAction<SortAndFilterOptionsType>>;
  sortAndFilterOptions: SortAndFilterOptionsType
  setClearAllStateDisabled: Dispatch<SetStateAction<boolean>>;
}

const SearchBox: React.FC<SearchBoxProps> = ({ setSortAndFilterOptions, sortAndFilterOptions, setClearAllStateDisabled }) => {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 350);
  const handleTitleChange = (query: string) => {
    if (query !== "") {
      setClearAllStateDisabled(false);
    }
    setSortAndFilterOptions({
      ...sortAndFilterOptions,
      titleSearchKeyword: query,
    });
  };
  useEffect(() => {
    handleTitleChange(debouncedQuery);
  }, [debouncedQuery]);

  return (
    <form method="post">
      <input
        type="text"
        name="listing-search"
        placeholder="Job title, keywords, or company"
        value={query}
        onChange={e=>setQuery(e.target.value)}
      />
      <span className="icon flaticon-search-3"></span>
    </form>
  );
};

export default SearchBox;