import { clearFilterParams } from "@/helper";
import { useRouter } from "next/navigation";
import specialties from "@/data/specialties.json";
import AutoComplete from "./AutoComplete";

function SearchField({ filter, setFilter, updateData, setDataInURL }) {
  const router = useRouter();

  const clearText = () => {
    clearFilterParams(router, ["name", "category", "specialty"]);
    const newFilter = {
      ...filter,
      ...{
        name: "",
        category: undefined,
        specialty: undefined,
      },
    };
    setFilter(newFilter);
    // setDataInURL(newFilter);
  };

  const handleSearch = (e) => {
    const findName = specialties.find((item) => item.name === e);
    const searchParams = new URLSearchParams(window.location.search);
    let dataUrl = {};

    if (findName) {
      let newFilter = { ...filter };
      if (findName.parent) {
        const itemParent = specialties.find(
          (item) => item.id === findName.parent
        );
        dataUrl.specialty = findName.name;
        newFilter.category = itemParent;
        newFilter.specialty = findName;
        // updateData("name", e);
      } else {
        dataUrl.specialty = findName.name;
        newFilter.category = findName;
        newFilter.specialty = "";
      }

      searchParams.delete("name");
      Object.entries(dataUrl).forEach(([key, value]) => {
        if (value) {
          searchParams.set(key, value);
        }
      });
      router.push(`?${searchParams.toString()}`);
      newFilter.name = e;
      setFilter(newFilter);
      // const newFilter = { ...filter, [name]: e };
      // setFilter(newFilter);
    } else {
      let newFilter = filter;

      if (
        filter.name === filter.specialty?.name ||
        filter.name === filter.category?.name
      ) {
        searchParams.delete("specialty");
        newFilter.specialty = "";
        newFilter.category = "";
        router.push(`?${searchParams.toString()}`);
      }
      newFilter.name = e;
      // updateData("name", e);
      setFilter(newFilter);
      setDataInURL(newFilter);
    }
  };

  return (
    <div className="!min-w-[50%] !w-[524px]">
      <AutoComplete
        data={specialties}
        clearText={clearText}
        inputValue={filter.name}
        handleSearch={handleSearch}
        // handleSearch={(e) => updateData("name", e)}
        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
      />
    </div>
  );
}

export default SearchField;