import { useStore } from "@/store";
import { TPlanNameModal } from "@/types";
import { getPrices } from "@/utils/actions";
import { plans } from "@/utils/planes";
import { useSearchParams } from "next/navigation";
import { useEffect } from "react";
import useSWR from "swr";

export const useModal = () => {
  const { data, isLoading: isLoadingData } = useSWR("/prices", getPrices);
  const productId = (Array.isArray(data) && data?.find((plan, i) => plan.name === plans[i].name)?.productId) || "";
  const { setPlan, modal: modalStore, setModal } = useStore();
  const searchParams = useSearchParams();
  const modal = searchParams.get("showDialog");
  const plan = searchParams.get("plan") as TPlanNameModal["name"];
  const modales = /phone|planes|condiciones-de-servicio/.test(modal as string);
  useEffect(() => {
    const html = document.documentElement;
    setPlan({ name: plan, productId });
    modal && (html.style.overflowY = "hidden");
    return () => {
      html.removeAttribute("style");
      setPlan({ name: "", productId: "" });
      modal !== "phone" && setModal("phone");
    };
  }, [modal, plan, setPlan, productId, setModal]);

  return { modal, modales, modalStore, isLoadingData };
};