import { Button } from "@mui/material";
import specialties from "@/data/specialties.json";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { request } from "@/services/response";
import { degreeVal } from "@/helper";

function ButtonApply({
  data,
  setConfirmedData,
  matchedCity,
  matchedState,
  setOpen,
  setDoctors,
}) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const sendReq = (requestData) => {
    setLoading(true);

    request
      .getDoctors(requestData)
      .then((res) => {
        if (res && res.data) setDoctors(res.data);
      })
      .catch(() => {})
      .finally(() => {
        setOpen(false);
        setLoading(false);
      });
  };

  const applyFilters = () => {
    const current = new URLSearchParams();

    const mappings = [
      {
        key: "field",
        getValue: (name) => {
          if (data.category) {
            const children = specialties.filter(
              (item) => item.parent === data.category.id
            );
            return children.length > 0
              ? children.find((item) => item.name === data.specialties.name)[
                  name || "id"
                ]
              : data.category[name || "id"];
          }
          return null;
        },
      },
      {
        key: "gender",
        getValue: () => (data.gender === "زن" ? "woman" : "man" || null),
      },
      {
        key: "degree",
        getValue: (name) => {
          const item = degreeVal.find((item) => item.name === data.degree);

          return (item && item[name || "val"]) || null;
        },
      },
      { key: "turn", getValue: () => data.turn },
    ];

    let requestData = {
      city: matchedCity?.id || null,
      state: matchedState?.id || null,
    };

    mappings.forEach(({ key, getValue }) => {
      let value;
      if (key === "field") {
        value = getValue("name");
      } else if (key === "gender") {
        value = data.gender;
      } else if ("degree") {
        value = getValue("name");
      }
      current.set(key, value);
    });

    mappings.forEach(({ key, getValue }) => {
      let value = getValue();
      requestData[key === "field" ? "specialty" : key] = value;
    });

    const queryString = current.toString();
    setConfirmedData(data);
    sendReq(requestData);
    router.push(`/doctors?${queryString}`);
  };

  return (
    <div className="flex justify-end w-full">
      <Button
        loading={loading}
        variant="contained"
        onClick={applyFilters}
        className="!px-3 !py-2 !text-[16px] !font-medium"
      >
        اعمال تغییرات
      </Button>
    </div>
  );
}

export default ButtonApply;