"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, useState } from "react";
import { toast } from "react-toastify";
import Alerts from "../Alert";
import Button from "../Button";
import bkashImage from "/public/static/bkash.png";

type props = {
  data?: any;
};

const BkashBalanceRecharge: FC<props> = ({ data }) => {
  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-balance-recharge/${mode}`,
        statusData
      );
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      if (mode === "create" && data?.bkashURL !== undefined) {
        window.location.href = data?.bkashURL;
      }
    },
    onError: (error) => {
      toast.error(useParseError(error));
    },
  });

  useEffect(() => {
    if (params.get("status")) {
      setStatus(params.get("status"));
    }
    if (params.get("status") === "success") {
      setMode("execute");
      if (mode === "execute") {
        makePayment({
          paymentID: params.get("paymentID"),
          pid: params.get("pid"),
          host: `${window?.location?.hostname}`,
        } as any);
      }
    }
  }, [mode, status]);
  useEffect(() => {
    if (mode === "execute" && status === "success") {
      route.push("/wallets");
    }
  }, [status]);

  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={() =>
                makePayment({
                  amount: data.amount,
                  invoice: data.invoice,
                  host: `${window?.location?.hostname}`,
                  callback: `https://${window?.location?.hostname}/wallets?pid=${data.paymentID}`,
                } as any)
              }
              className="mt-5"
            >
              <Image height={20} alt="" src={bkashImage} />
              <span className="block ml-2">Pay With bKash</span>
            </Button>
          </div>
        )}
      </div>
    </>
  );
};

export default BkashBalanceRecharge;