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";

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: () => {
          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
              : data.category.name;
          }
          return null;
        },
      },
      { key: "gender", getValue: () => data.gender || null },
      { key: "degree", getValue: () => data.degree || null },
      { key: "turn", getValue: () => data.turn },
    ];

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

    mappings.forEach(({ key, getValue }) => {
      const value = getValue();
      current.set(key, value);
      requestData[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;