import ModalShell from "./ModalShell";
import { Button, Col, Row, Avatar } from "antd";
import DotLoading from "../Loading/DotLoading";
import { Link, Navigate } from "react-router-dom";
import FailedTransactionIcon from "../Icon/FailedTransactionIcon";
import { IConfirmationModalProps } from "../types";
import { CloseOutlined } from "@ant-design/icons";
import { usePaymentListenerQuery } from "../../services/checkout-service";

const ConfirmationModal = ({
  show = false,
  onCancel,
  title = "",
  initiateAgain,
  transaction,
  redirect,
  successMessage,
}: IConfirmationModalProps) => {
  const { data, isFetching, isLoading } = usePaymentListenerQuery(
    transaction.reference
  );

  /*  if (
    data?.data?.status === "success" &&
    data?.data?.excessAmountReceivedInCrypto > 0
  )
    return (
      <Navigate
        to="/success"
        replace={true}
        state={{ response: data.data, message: successMessage, redirect: redirect }}
      />
    );*/

  if (data?.data?.status === "success")
    return (
      <Navigate
        to="/payment-status"
        replace={true}
        state={{
          response: data.data,
          message: successMessage,
          redirect: redirect,
          status: true,
        }}
      />
    );
  if (
    data?.data?.status === "failed" &&
    data?.data?.failureReason === "An amount lower than expected was received"
  )
    return (
      <Navigate
        to="/payment-status"
        replace={true}
        state={{
          status: false,
          redirect: false,
          transfer: true,
        }}
      />
    );

  return (
    <ModalShell
      title={title}
      show={show}
      cancel={onCancel}
      width={450}
      className="rounded-xl"
    >
      <div className="relative">
        {!isLoading || isFetching ? (
          <>
            <Row gutter={24} className="py-5">
              <Col xs={24} md={8}>
                <div className="text-center md:text-left">
                  {transaction?.imageFilePath && (
                    <Avatar
                      shape={"circle"}
                      size={100}
                      alt={"product-image"}
                      src={`${process.env.REACT_APP_IMAGE_STORAGE}/${transaction?.imageFilePath}`}
                    />
                  )}
                </div>
              </Col>
              <Col xs={24} md={16} className="text-center md:text-right">
                <div className="mt-2">
                  <p className="text-[#02084B] ">{transaction.email}</p>
                  <p className="text-[#7B61FF] font-semibold text-lg">
                    {transaction.expectedAmountInCrypto} {transaction.crypto}
                  </p>
                  <p className="text-[#02084B] ">
                    Transaction fee : {transaction.feeInCrypto}{" "}
                    {transaction.crypto}
                  </p>
                </div>
              </Col>
            </Row>
            <hr />
          </>
        ) : null}
        {!isLoading && data?.data?.status === "failed" ? (
          <div className="text-center my-8 w-[60%] m-auto">
            <FailedTransactionIcon />
            <p className="text-[#994747] text-lg font-bold py-2">
              No payment received
            </p>
            <p className="text-[#2C3489]">
              No payment was received from you from this transaction
            </p>
            <Button
              style={{ color: "#2c3489", borderRadius: "5px" }}
              className="h-10 my-4 font-semibold bg-[#2C348917] border-[#2C3489] active:bg-[#2C348917] hover:bg-[#2C348917] hover:opacity-70 hover:border-[#2C3489]"
              onClick={initiateAgain}
            >
              Try Again
            </Button>
          </div>
        ) : isLoading || isFetching ? (
          <>
            <div className="text-center my-8">
              <p className="text-[#2C3489]">Confirming payment of </p>
              <p className="text-[#CC9933] font-semibold text-lg mb-4">
                {transaction.expectedAmountWithFeeInCrypto} {transaction.crypto}
              </p>
              <DotLoading />
            </div>
            <div className="m-auto text-center text-[#2C3489] w-[75%]">
              <p>
                Your transaction is processing, please hold on for payment
                confirmation.
              </p>
            </div>{" "}
          </>
        ) : (
          <div className="flex flex-col items-center text-[#2C3489]">
            <p className="font-semibold text-lg text-center mb-3">
              Payment was unsuccessful.
            </p>
            <p className="text-[#2C3489] text-center text-sm md:w-4/5 m-auto">
              Something Went Wrong
            </p>
          </div>
        )}
      </div>
    </ModalShell>
  );
};
export default ConfirmationModal;