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) => {
    changeUrl(value, name);
    const newData = data;
    newData[name] = value;
    const childrenList = specialties.filter((item) => item.parent);
    const filteredChildrenList = childrenList.filter(
      (item) => item.parent === value.id
    );
    if (isCategory) {
      newData.specialties = "";
      newData.specialties = filteredChildrenList[0];
    }
    setData(newData);
    return newData;
  };

  console.log(data);

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

export default Content;