import React, { useEffect, useState, useContext } from "react";

import { IonButton, IonIcon, IonActionSheet } from "@ionic/react";
import { arrowForward, alertCircle, checkmarkCircle } from "ionicons/icons";
import { formatNumber, generateRequestId } from "../../utils/index";
import "./pay.css";
import { Context } from "../../context/contex";
import axios from "axios";

const finPub = "pk_Njg0YzRiZWU2OWI4MmEwMDEyN2NkZWRlOjoyMDYyMjY=";

interface FincraPaymentProps {
 netAmount: number;
 amount: number;
 name: string;
 email: string;
 phone: string;
}

declare global {
 interface Window {
  Fincra: any;
 }
}

export const FincraPayment: React.FC<FincraPaymentProps> = ({
 netAmount,
 amount,
 name,
 email,
 phone,
}) => {
 const context = useContext(Context);
 if (!context) {
  return <div>Loading...</div>;
 }

 const { apiURL, settings, presentToast, busy, setBusy, getUserInfo } = context;
 useEffect(() => {
  const script = document.createElement("script");
  script.src =
   "https://unpkg.com/@fincra-engineering/checkout@2.2.0/dist/inline.min.js";
  script.async = true;
  document.body.appendChild(script);

  return () => {
   document.body.removeChild(script); // cleanup on unmount
  };
 }, []);

 const logDeposit = async (ref: string) => {
  //if (!settings) return;
  setBusy(true);
  try {
   const response = await axios.post(
    apiURL,
    new URLSearchParams({
     action: "log_deposit",
     amount: netAmount.toString(),
     email,
     ref,
    }),
    {
     headers: {
      "Content-Type": "application/x-www-form-urlencoded",
     },
    }
   );

   if (!response.data.success) {
    console.error("Error:", response.data.message);
    presentToast(
     "top",
     response.data.message,
     () => null,
     "danger",
     alertCircle
    );
   } else {
    await getUserInfo();
    presentToast(
     "top",
     response.data.message,
     () => null,
     "success",
     checkmarkCircle
    );
   }
  } catch (error: any) {
   console.error("Error:", error?.message || error);
  }
  setBusy(false);
 };

 const payFincra = () => {
  if (typeof window.Fincra === "undefined") {
   presentToast(
    "top",
    `Deposit service still loading.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  if (!amount || +amount < 100) {
   presentToast(
    "top",
    `Deposit amount is less than 100 NGN.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }

  window.Fincra.initialize({
   key: finPub,
   amount: parseInt(String(amount)),
   currency: "NGN",
   customer: {
    name,
    email,
    phoneNumber: phone,
   },
   feeBearer: "business",
   reference: generateRequestId(),
   onClose: function () {
    presentToast(
     "top",
     `Transaction was not completed, window closed.`,
     () => null,
     "danger",
     alertCircle
    );
   },
   onSuccess: async function (data: any) {
    // console.log("DATA", data);
    const reference = data.merchantReference;
    //  console.log("DATA", reference);

    await logDeposit(reference);
   },
  });
 };

 return (
  <IonButton expand="block" onClick={payFincra}>
   <IonIcon slot="end" icon={arrowForward}></IonIcon>
   Deposit {amount ? "₦" + formatNumber(amount) : ""}
  </IonButton>
 );
};