import { Button, Result } from "antd";
import React, { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import "./index.css";
import { useLocation } from "react-router-dom";
import { useVerifyPayment } from "../../apis/Payment";
import LoadingAnimation from "../../pages/Dashboard/Loading/LoadingAnimation";

/**
 * Represents the PaymentStatus component.
 * @interface
 */
const PaymentStatus = () => {
  /**
   * State to track successful payment status.
   * @type {boolean}
   * @default false
   * @name successPayment
   * @memberOf PaymentStatus
   */
  const [successPayment, setSuccessPayment] = useState(false);
  /**
   * State to track payment error status.
   * @type {boolean}
   * @default false
   * @name isErrorPayment
   * @memberOf PaymentStatus
   */
  const [isErrorPayment, setIsErrorPayment] = useState(false);
  /**
   * Get the current location.
   */
  const location = useLocation();
  /**
   * Create URL search parameters from the current location.
   */
  const searchParams = new URLSearchParams(location.search);
  /**
   * Initialize a navigation function.
   */
  const navigate = useNavigate();
  /**
   * Access the individual query parameters.
   * @type {string | null}
   */

  const pidx = searchParams.get("pidx");
  const txnId = searchParams.get("txnId");
  const amount = searchParams.get("amount");
  const mobile = searchParams.get("mobile");
  const purchase_order_id = searchParams.get("purchase_order_id");
  const purchase_order_name = searchParams.get("purchase_order_name");
  const transaction_id = searchParams.get("transaction_id");
  const {
    mutate: verifyMutate,
    isLoading,
    isError,
    error,
  } = useVerifyPayment();
  useEffect(() => {
    verifyMutate(
      {
        pidx,
        txnId,
        amount,
        mobile,
        purchase_order_id,
        purchase_order_name,
        transaction_id,
      },
      {
        onSuccess: (res) => {
          if (res?.data?.data?.result?.status === "Completed") {
            setSuccessPayment(true);
          } else {
            setIsErrorPayment(true);
          }
        },
      }
    );
  }, []);
  if (isError || isErrorPayment) {
    return (
      <div className="payment_status_container">
        <Result
          status="error"
          title="Payment Failed"
          subTitle="Please kindly retry the payment process by pressing following button"
          extra={[
            <Button
              danger
              key="console"
              onClick={() => navigate("../dashboard/share_contract")}
            >
              Try again
            </Button>,
          ]}
        ></Result>
      </div>
    );
  }
  if (successPayment) {
    return (
      <div className="payment_status_container">
        <Result
          status="success"
          title="Successful payment!"
          subTitle="Your payment has been successfully done, Now you can view your payment in your profile payment history."
          extra={[
            <Button
              type="primary"
              className="view_btn"
              key="console"
              onClick={() => navigate("../dashboard/profile")}
            >
              View Payment
            </Button>,
          ]}
        />
      </div>
    );
  }
  return (
    <div className="payment_status_container">
      <LoadingAnimation />
    </div>
  );
};

export default PaymentStatus;