"use client";

import { postPublicData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { useMutation } from "@tanstack/react-query";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";
import Alerts from "../Alert";
import Button from "../Button";
import { TSclientPaymentSchema } from "../forms/schema/client-payment";
import bkashImage from "/public/static/bkash.png";

type props = {
  client?: TSclientPaymentSchema;
  redirect?: string
};

const BkashPayment: FC<props> = ({ client, redirect = "pay" }) => {
  const route = useRouter();
  const params = useSearchParams();
  const [status, setStatus] = useState<any>(undefined);
  const [mode, setMode] = useState("create");

  const { mutate: makePayment, isPending } = useMutation({
    mutationFn: async (statusData) => {
      const data = await postPublicData(`/api/v1/bkash/${mode}`, statusData);
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      if (mode === "create" && data?.bkashURL !== undefined) {
        window.location.href = data?.bkashURL;
      }
      if (data?.message === "OK") {
        window.location.href = `/${redirect}?payment=${params?.get("status")}`;
      }
    },
    onError: (error) => {
      toast.error(useParseError(error));
    },
  });
  const executedRef = useRef(false);

  useEffect(() => {
    if (params.get("status")) {
      setStatus(params.get("status"));
    }
    if (params.get("status") === "success") {
      setMode("execute");
      if (mode === "execute" && !executedRef.current) {
        // Prevent multiple executions of the payment function
        executedRef.current = true;
        makePayment({
          paymentID: params.get("paymentID"),
          pid: params.get("pid"),
          host: `${window?.location?.hostname}`,
        } as any);
      }
    }
  }, [mode, status]);

  useEffect(() => {
    if (mode === "execute" && status === "success") {
      //setMode("create");
      route.push(`/${redirect}`);
      toast.success("Payment processed successfully!");
    }
  }, [status]);

  const invoiceId = client?.invoice
    .map((inv: any) => inv?.invoice_id)
    .join("-");

  const createPayment = async () => {
    if (client?.total_due < 1) {
      toast.error("Amount should be greater than 0");
    } else {
      makePayment({
        amount: client.total_due,
        invoice: invoiceId,
        host: `${window?.location?.hostname}`,
        id: client?.id,
        callback: `https://${window?.location?.hostname}/${redirect}?pid=${client.id}`,
      } as any);
    }
  };

  return (
    <>
      <div>
        {status === "failure" && (
          <Alerts type={status} message="Payment Filed, Please try again" />
        )}
        {status === "success" && (
          <Alerts type={status} message="Payment success" />
        )}
        {mode === "create" && (
          <div className="block">
            <Button
              isProcessing={isPending}
              onClick={() => createPayment()}
              className="mt-5"
            >
              <Image height={20} alt="" src={bkashImage} />
              <span className="block ml-2">Pay With bKash</span>
            </Button>
          </div>
        )}
      </div>
    </>
  );
};

export default BkashPayment;