import { useRouter } from "next/navigation";
import specialties from "@/data/specialties.json";
import Form from "./form";

function Content({ data, setData }) {
  const router = useRouter();

  const changeUrl = (value, name) => {
    const current = new URLSearchParams(window.location.search);
    current.set(name, value.id || value);
    const queryString = current.toString();
    router.push(`/doctors?${queryString}`);
  };

  const changeData = (value, name, isCategory, key) => {
    const newData = { ...data, [name]: value };

    if (isCategory) {
      const childrenList = specialties.filter((item) => item.parent);
      const filteredChildrenList = childrenList.filter(
        (item) => item.parent === value.id
      );
      const firstChildren = filteredChildrenList[0];

      newData.specialties = firstChildren || "";
      changeUrl(firstChildren || value, key);
    } else {
      changeUrl(value, key);
    }

    setData(newData);
    return newData;
  };

  return (
    <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
      <Form data={data} changeData={changeData} />
    </div>
  );
}

export default Content;