import { useState } from "react";

import SearchBar from "../search";
import SortList from "../sortlist";
import { useRouter, useSearchParams } from "next/navigation";
import specialties from "@/data/specialties.json";

// Data
import states from "@/data/state.json";
import cities from "@/data/city.json";
import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
import { request } from "@/services/response";
import FilterLocate from "./FilterLocate";

function Head({ matchedCity, matchedState, setDoctors }) {
  const searchParams = useSearchParams();
  const router = useRouter();
  const fieldName = searchParams.get("specialty");

  const findItem = (key, name) =>
    specialties.find((item) => item[key] === name);
  const isParent =
    findItem("name", fieldName) && findItem("name", fieldName).parent;

  const selectedState = searchParams.get("state") || matchedState?.name;
  const selectedCity =
    searchParams.get("city") ||
    (matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);

  const valCategory = isParent
    ? findItem("id", isParent)
    : findItem("name", fieldName);
  const valSpecialty = isParent && findItem("name", fieldName);

  const defaultFilter = {
    state: selectedState && states.find((item) => item.name === selectedState),
    city: selectedCity && cities.find((item) => item.name === selectedCity),
    category: valCategory,
    specialty: valSpecialty,
    active: searchParams.get("active") || 0,
    gender: searchParams.get("gender") || "هر دو",
    degree: searchParams.get("degree") || "همه موارد",
    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
    name:
      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
  };

  const [filter, setFilter] = useState(defaultFilter);

  const setDataInURL = (newFilter) => {
    const query = QueryForDoctorsFilter(newFilter);

    const searchParams = new URLSearchParams(query).toString();
    router.push(`?${searchParams}`);
  };

  const updateData = (name, value, isReq) => {
    const newFilter = { ...filter, [name]: value };
    setDataInURL(newFilter);
    setFilter(newFilter);
    isReq && sendReq(newFilter);
  };
  const sendReq = (newFilter) => {
    const data = newFilter || filter;
    const params = QueryForDoctorsReq(data);
    let filteredName = params;
    if (
      data?.name === data.specialty?.name ||
      data?.name === data.category?.name
    ) {
      filteredName.name = "";
      delete filteredName.name;
    }

    return request
      .getDoctors(filteredName)
      .then((res) => {
        setDoctors(res.data);
        return res;
      })
      .catch((err) => {
        throw err;
      });
  };

  return (
    <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
      <FilterLocate
        filter={filter}
        sendReq={sendReq}
        setFilter={setFilter}
        setDataInURL={setDataInURL}
      />
      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
        <SearchBar
          filter={filter}
          sendReq={sendReq}
          setFilter={setFilter}
          updateData={updateData}
          setDataInURL={setDataInURL}
        />
        <SortList
          filter={filter}
          sendReq={sendReq}
          setFilter={setFilter}
          updateData={updateData}
          setDataInURL={setDataInURL}
        />
      </div>
    </div>
  );
}

export default Head;