//@ts-nocheck
import { Dispatch, SetStateAction, useState, useEffect } from "react";
import { Transaction } from "@solana/web3.js";
import { notification, Avatar, Spin } from "antd";

import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { Buffer } from "buffer";
import ModalShell from "../../components/Model/ModalShell";
import {
  usePayWithWalletConnectMutation,
  usePaymentListenerQuery,
  useWalletListenerMutation,
} from "../../services/checkout-service";
import { PaymentLinkResponseType } from "../../components/types";
import { useAppSelector } from "../../app/hooks";
import { useNavigate } from "react-router-dom";
import AddButton from "../../components/Button/AddButton";
require("@solana/wallet-adapter-react-ui/styles.css");

export type IWalletCheckoutModalProps = {
  show: boolean;
  onCancel: () => void;
  title: string;
  loading?: boolean;
  setSelectedWallet: Dispatch<
    SetStateAction<"solana" | "wallet-connect" | "checkout">
  >;
  setIsLoading: Dispatch<SetStateAction<boolean>>;
};

export type IWalletOptionModalProps = {
  show: boolean;
  onCancel: () => void;
  title: string;
  loading?: boolean;
  data: PaymentLinkResponseType;
};

const WalletConnectModal = ({
  show = false,
  onCancel,
  title = "",
  data,
}: IWalletOptionModalProps) => {
  const { connection } = useConnection()
  const { publicKey, sendTransaction } = useWallet();
  const [sendPublicKey] = usePayWithWalletConnectMutation();
  const { transactionResponse } = useAppSelector((s) => s.checkout);
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [verifyTransaction, { isLoading: loading, data: response }] =
    useWalletListenerMutation();

  async function verifyWalletTransaction() {
    try {
      await verifyTransaction(transactionResponse.reference).unwrap();
      notification.success({
        message: "Your transaction was successful",
      });

      navigate("/payment-status", {
        replace: true,
        state: {
          refund: false,
          message: data.successMessage,
          redirect: data.redirectLink,
          status: true,
          response: { excessAmountReceivedInCrypto: 0 },
          transfer: false,
        },
      });
    } catch (err) {
      notification.error({
        message: error.data.message || "Error",
      });
    }
    localStorage.removeItem("walletName");
  }

  const onClickPay = async () => {
    setIsLoading(true);
    try {
      const wallet = {
        walletPublicAddress: publicKey?.toBase58(),
      };
      let res = await sendPublicKey({
        data: wallet,
        ref: transactionResponse.reference,
      }).unwrap();
      const result = res?.data;
      const bs64tx = result?.transactionHash;
      const transaction = Transaction.from(Buffer.from(bs64tx, "base64"));
      transaction.recentBlockhash = await (
        await connection.getLatestBlockhash()
      ).blockhash;

      const resp = await sendTransaction(transaction, connection);
      await connection.confirmTransaction(resp)
      verifyWalletTransaction()

    } catch (error) {
      notification.error({
        message: error.data.message || "Error",
      });
    }
    setIsLoading(false);
  };

  return (
    <ModalShell
      title={title}
      show={show}
      style={{ padding: 0 }}
      cancel={onCancel}
      width={500}
    >
      <div className="px-2 py-5 flex flex-col justify-center items-center">
        <div>
          {transactionResponse?.imageFilePath && (
            <Avatar
              shape={"circle"}
              size={100}
              alt={"product-image"}
              src={`${process.env.REACT_APP_IMAGE_STORAGE}/${transactionResponse?.imageFilePath}`}
            />
          )}
        </div>

        <div className="mt-2 text-center">
          <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>

        <div className="flex flex-col justify-center items-center  py-3">
          <p className="text-[#02084B] font-semibold text-center mb-1">
            Pay with Wallet of your choice
          </p>
          <div className="flex justify-between items-center gap-2">
            <WalletMultiButton className="!bg-[#02084B]  text-white font-sm" />
            <AddButton
              className="font-semibold"
              onClick={onClickPay}
              disabled={!publicKey}
              loading={isLoading || loading}
            >
              Make Payment
            </AddButton>
          </div>
        </div>
      </div>
    </ModalShell>
  );
};
export default WalletConnectModal;