import { Input } from "@/components/ui/input";
import React from "react";

export function Search({ list, filters, setFilters }) {
  const [typingTimeout, setTypingTimeout] = React.useState<any>(null);
  const [value, setValue] = React.useState<string>(filters.search.text ?? "");

  const handleSearchChange = (event: any) => {
    setValue(event.target.value);

    setTypingTimeout(
      setTimeout(() => {
        setFilters((prev) => {
          const copy = { ...prev };

          copy.search.text = event.target.value;

          return copy;
        });
      }, 1000),
    );
  };

  React.useEffect(() => {
    return () => {
      if (typingTimeout) {
        clearTimeout(typingTimeout);
      }
    };
  }, [typingTimeout]);

  return (
    <search role="search">
      <Input
        autoFocus
        className="max-w-sm bg-neutral-50 shadow-inner"
        type="text"
        name="search"
        autoComplete={"" + Math.random()}
        placeholder={`Search by ${filters.search.fields.map((f) => f).join(", ")}...`}
        value={value ?? ""}
        onChange={handleSearchChange}
        disabled={!list || (typeof list === "string" && list !== "empty")}
      />
    </search>
  );
}