"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); // جستجو مجدد بدون نام پزشک
  };

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

    // اگر کاربر پاک کرد
    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()}`);
    setFilter(newFilter);
    setDataInURL(newFilter);

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

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

export default SearchField;
