import { Row, Col, message, Progress, Button, Avatar } from "antd";
import { useState } from "react";
import CustomInput from "../../components/Input/CustomInput";
import copy from "../../assets/paymentcopy.svg";
import { IProductCheckoutProps } from "../../components/types";
import ConfirmationModal from "../../components/Model/ConfirmationModal";
import { useAppSelector } from "../../app/hooks";
import ProgressTimer from "../../components/Loading/ProgressTimer";

const SolanaNetwork = ({
  setSelectedWallet,
  makePayment,
  redirect,
  successMessage
}: IProductCheckoutProps) => {
  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
  const { transactionResponse } = useAppSelector((s) => s.checkout);
  /*const { data, error, isFetching, isLoading, isSuccess } = usePaymentListenerQuery(transactionResponse.reference);*/

  async function copyText(text: string) {
    try {
      await navigator.clipboard.writeText(text);
      message.info({ content: "copied", duration: 3 });
    } catch {
      message.error({ content: "unable to copy", duration: 3 });
    }
  }

  async function copyAmount(text: number) {
    let res = text.toString();
    try {
      await navigator.clipboard.writeText(res);
      message.info({ content: "amount copied", duration: 3 });
    } catch {
      message.error({ content: "unable to copy", duration: 3 });
    }
  }

  function timeOut() {
    makePayment("solana", true);
  }
  function initiateTransactionAgain() {
    makePayment("solana", true);
  }
  function checkTransactionStatus() {
    setShowConfirmation(true);
  }

  return (
    <div className="px-4 pb-20">
      <div className="shadow-xl max-w-lg md:max-w-xl m-auto bg-white p-5 md:p-20 mt-20 rounded-md">
        

        <Row gutter={24}>
          <Col xs={24} md={8}>
            <div className="text-center md:text-left">
              {transactionResponse?.imageFilePath && (
                <Avatar
                  shape={"circle"}
                  size={100}
                  alt={"product-image"}
                  src={`${process.env.REACT_APP_IMAGE_STORAGE}/${transactionResponse?.imageFilePath}`}
                />
              )}
            </div>
          </Col>
          <Col xs={24} md={16} className="text-center md:text-right">
            <div className="mt-2">
              <p className="text-[#02084B] ">{transactionResponse.email}</p>
              <p className="text-[#7B61FF] font-semibold text-lg">
                {transactionResponse.expectedAmountInCrypto}{" "}
                {transactionResponse.crypto}
              </p>
              <p className="text-[#02084B] ">
                Transaction fee : {transactionResponse.feeInCrypto}{" "}
                {transactionResponse.crypto}
              </p>
            </div>
          </Col>
        </Row>
        <hr className="my-5 text-[#02084B] bg-[#02084B] opacity-30 2xl:opacity-100" />

        <div className="text-center w-full my-3">
          <div className="">
            <p className="text-center text-[#CC9933] font-semibold my-2">
              Send payment within
            </p>
            <ProgressTimer timeOut={timeOut} />
          </div>
          <Button
            style={{ color: "#2c3489", borderRadius: "5px" }}
            className="my-5 btn-check text-xs col-span-2 bg-[#2C348917] border-[#2C3489] active:bg-[#2C348917] hover:bg-[#2C348917] hover:opacity-80 hover:border-[#2C3489]"
            onClick={checkTransactionStatus}
          >
            <div className="flex items-center gap-1">
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 0.166992C2.78 0.166992 0.166664 2.78033 0.166664 6.00033C0.166664 9.22033 2.78 11.8337 6 11.8337C9.22 11.8337 11.8333 9.22033 11.8333 6.00033C11.8333 2.78033 9.22 0.166992 6 0.166992ZM4.41916 8.50283L2.325 6.40866C2.0975 6.18116 2.0975 5.81366 2.325 5.58616C2.5525 5.35866 2.92 5.35866 3.1475 5.58616L4.83333 7.26616L8.84666 3.25283C9.07416 3.02533 9.44166 3.02533 9.66916 3.25283C9.89666 3.48033 9.89666 3.84783 9.66916 4.07533L5.24166 8.50283C5.02 8.73033 4.64666 8.73033 4.41916 8.50283Z"
                  fill="#02084B"
                />
              </svg>
              <span>I have made payment</span>
            </div>
          </Button>
        </div>

        <div className="my-4 relative">
          <label className="text-[#2c3489] font-medium">
            Total amount to be paid{" "}
          </label>
          <CustomInput
            className="font-bold"
            placeholder="amount"
            disabled
            value={`${transactionResponse.expectedAmountWithFeeInCrypto} ${transactionResponse.crypto}`}
          />

          <button
            onClick={() =>
              copyAmount(transactionResponse.expectedAmountWithFeeInCrypto)
            }
            className="bg-[#2C3489] absolute p-[0.63rem] bottom-0 -right-2 rounded-r-lg"
          >
            <img width={26} src={copy} alt="copy" />
          </button>
        </div>

        <div className="mb-10 w-full relative">
          <label className="text-[#2c3489] w-1/3 font-medium">
            Recipient’s crypto address
          </label>
          <br />
          <span className="text-xs w-2/5 text-[#2c3489] font-medium">
            (cryptocurrency should be sent to this wallet address)
          </span>
          <CustomInput
            className="mt-1"
            value={transactionResponse.address}
            disabled
          />

          <button
            onClick={() => copyText(transactionResponse.address)}
            className="bg-[#2C3489] absolute p-[0.63rem] bottom-0 -right-2 rounded-r-lg"
          >
            <img width={26} src={copy} alt="copy" />
          </button>
        </div>

        <div className="my-4">
          <label className="text-[#2c3489] font-medium">Network </label>
          <CustomInput disabled value={"Solana (SOL)"} />
        </div>

        <p className="text-xs lg:text-base text-[#E31D1C]">
          Note: The wallet address is on the SOL network. Please ensure that you
          select the SOL network when sending tokens to avoid token loss.
        </p>
        <div className="mt-8">
          <Button
            style={{ color: "#2c3489", borderRadius: "5px" }}
            className="h-10 font-semibold bg-[#2C348917] border-[#2C3489] active:bg-[#2C348917] hover:bg-[#2C348917] hover:opacity-70 hover:border-[#2C3489]"
            onClick={() => setSelectedWallet("checkout")}
          >
            {"<"} Go Back
          </Button>
        </div>
      </div>

      {showConfirmation && (
        <ConfirmationModal
          show={showConfirmation}
          onCancel={() => setShowConfirmation(false)}
          title=""
          setSelectedWallet={setSelectedWallet}
          initiateAgain={initiateTransactionAgain}
          transaction={transactionResponse}
          redirect={redirect}
          successMessage={successMessage}
        />
      )}
    </div>
  );
};
export default SolanaNetwork;