"use client";

import { clearFilterParams } from "@/helper";
import { useRouter } from "next/navigation";
import { useRef } from "react";
import AutoComplete from "./AutoComplete";

function SearchField({ filter, setFilter, setDataInURL, sendReq }) {
  const router = useRouter();
  const typingTimeoutRef = useRef(null);

  // پاک کردن ورودی
  const clearText = () => {
    clearFilterParams(router, ["name"]);
    const newFilter = { ...filter, name: "" };
    setFilter(newFilter);
    setDataInURL(newFilter);
    sendReq(newFilter); // درخواست مجدد بدون فیلتر
  };

  // جستجو فقط با نام پزشک
  const handleSearch = (value) => {
    const searchParams = new URLSearchParams(window.location.search);
    const newFilter = { ...filter, name: value };

    // اگر ورودی خالی شد → URL و لیست ریست بشن
    if (!value.trim()) {
      searchParams.delete("name");
      router.push(`?${searchParams.toString()}`);
      setFilter(newFilter);
      setDataInURL(newFilter);
      sendReq(newFilter);
      return;
    }

    // مقدار name در URL تنظیم می‌شود
    searchParams.set("name", value);
    router.push(`?${searchParams.toString()}`);

    // به‌روزرسانی state‌ها
    setFilter(newFilter);
    setDataInURL(newFilter);

    // ✅ debounce برای جلوگیری از اسپم درخواست‌ها
    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
    typingTimeoutRef.current = setTimeout(() => {
      sendReq(newFilter); // فقط با نام پزشک به بک‌اند
    }, 400);
  };

  return (
    <div className="!min-w-[50%] !w-full">
      <AutoComplete
        data={[]} // ✅ autocomplete بدون داده محلی، چون از API سرچ می‌کنی
        clearText={clearText}
        inputValue={filter.name}
        handleSearch={handleSearch}
        placeholder="جستجوی نام پزشک یا تخصص ..."
      />
    </div>
  );
}

export default SearchField;