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);
  };

  console.log(filter);

  const handleSearch = (e) => {
    const findName = specialties.find((item) => item.name === e);
    console.log(findName);

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

  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;