import { CloseOutlined } from "@ant-design/icons";
import { useEffect } from "react";
import { Navigate, useLocation } from "react-router-dom";
import SuccessIcon from "../components/Icon/SuccessIcon";

const PaymentStatus = () => {
  const location = useLocation();
  const responseMessage: any = location.state;

  const redirect = responseMessage?.redirect;
  const excessAmount = responseMessage?.response?.excessAmountReceivedInCrypto;

  useEffect(() => {
    if (redirect && excessAmount === 0) {
      setTimeout(() => {
        window.location.replace(`https://www.${redirect}`);
      }, 3000);
    }
  }, [redirect, excessAmount]);

  if (responseMessage === null) return <Navigate to="/*" />;

  return (
    <div className="text-center my-20 md:w-[60%] m-auto">
      {responseMessage.status ? (
        <div className="flex flex-col items-center">
          <SuccessIcon />
          {responseMessage?.refund ? (
            <h2 className="text-[#2C3489] text-center text-2xl">
              Your refund has been initiated{" "}
            </h2>
          ) : (
            <>
              <h1 className="text-[#2C3489] text-center text-2xl">
                {" "}
                Payment successful
              </h1>
              {excessAmount > 0 && (
                <div>
                  <h3 className="text-[#2C3489]">
                    We noticed you paid more than the requested amount. A refund
                    link has been sent to your mail{" "}
                  </h3>
                </div>
              )}
              {responseMessage?.message && (
                <h2 className="text-[#2C3489] text-center text-xl">
                  {responseMessage?.message}
                </h2>
              )}
            </>
          )}
        </div>
      ) : (
        <div className="flex flex-col items-center text-[#2C3489]">
          <div className="border border-red-300 mb-5 rounded-3xl border-[#F59999] p-2 md:p-3">
            <CloseOutlined
              style={{
                fontSize: 20,
                background: "transparent",
                color: "#F59999",
              }}
            />
          </div>
          <p className="font-semibold text-lg text-center mb-3">
            Payment was unsuccessful.
          </p>
          {responseMessage?.transfer && (
            <p className="text-[#2C3489] text-center text-sm md:w-4/5 m-auto">
              We noticed you did not pay up to the requested amount. A refund
              process has been sent to your mail{" "}
            </p>
          )}
        </div>
      )}
    </div>
  );
};
export default PaymentStatus;