import React, { FC, Fragment, useEffect, useState } from "react";
import ProductCheckout from "./components/ProductCheckout";
import SolanaNetwork from "./components/SolanaNetwork";
import WalletConnectModal from "./components/WalletConnectModal";
import WalletContext from "./components/WalletContext";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import LoadingDots from "../components/Loading/LoadingDots";

import {
  useMakePaymentMutation,
  useValidatePaymentLinkQuery,
} from "../services/checkout-service";
import { Navigate, useParams } from "react-router-dom";
import { skipToken } from "@reduxjs/toolkit/dist/query";
import { useAppDispatch } from "../app/hooks";
import { transactionResult } from "../features/checkoutReducer";
import { isFetchBaseQueryError, isErrorWithMessage } from "../components/types";
import WalletOptionModal from "../components/Model/WalletOptionModal";
import { notification } from "antd";

const Checkout: FC = () => {
  const { id } = useParams<{ id: string }>();
  const { data, error, isFetching, isLoading, isSuccess } =
    useValidatePaymentLinkQuery(id ?? skipToken);
  const [selectedWallet, setSelectedWallet] = useState<
    "solana" | "wallet-connect" | "checkout"
  >("checkout");
  const [loading, setLoading] = useState<boolean>(false);
  const [showWalletConnet, setShowWalletConnect] = useState<boolean>(false);
  const [showWalletOption, setShowWalletOption] = useState<boolean>(false);
  const [paymentLoading, setPaymentLoading] = useState<boolean>(false);
  const [initiateTransaction] = useMakePaymentMutation();
  const [transactionValue, setTransactionValue] = useState();
  const dispatch = useAppDispatch();

  //TODO fetch environment and store whether in state or whatever
  let environment = data?.data.environment;

  async function sendPayment(
    option: "solana" | "wallet-connect",
    retry = false
  ) {
    setPaymentLoading(true);
    setShowWalletOption(false);
    if (retry) setLoading(true);
    try {
      let res = await initiateTransaction({
        data: transactionValue,
        id: data?.data.uuid,
      }).unwrap();
      dispatch(transactionResult(res.data));
      setSelectedWallet(option);
      if (option === "wallet-connect") setShowWalletConnect(true);
    } catch (err) {
      console.log(err);
      if (isFetchBaseQueryError(err)) {
        const errMsg =
          //@ts-ignore
          "error" in err ? err.error : JSON.stringify(err.data?.message);
        notification.error({
          message: errMsg,
        });
      } else if (isErrorWithMessage(err)) {
        console.log(err);
      }
    }
    setPaymentLoading(false);
    setLoading(false);
  }

  useEffect(() => {}, []);

  return (
    <Fragment>
      {isLoading || isFetching || loading ? (
        <LoadingDots />
      ) : isSuccess ? (
        <WalletContext
          network={
            environment === "LIVE"
              ? WalletAdapterNetwork.Mainnet
              : WalletAdapterNetwork.Devnet
          }
        >
          {selectedWallet === "checkout" ? (
            <ProductCheckout
              data={data.data}
              loading={paymentLoading}
              setShowWalletOption={setShowWalletOption}
              setTransactionValue={setTransactionValue}
            />
          ) : selectedWallet === "solana" ? (
            <SolanaNetwork
              setSelectedWallet={setSelectedWallet}
              makePayment={sendPayment}
              redirect={data.data?.redirectLink}
              successMessage={data.data?.successMessage}
            />
          ) : selectedWallet === "wallet-connect" ? (
            <WalletConnectModal
              show={showWalletConnet}
              onCancel={() => {
                setShowWalletConnect(false);
                setSelectedWallet("checkout");
              }}
              data={data.data}
              title="Pay with Crypto Wallet"
            />
          ) : null}

          {showWalletOption && (
            <WalletOptionModal
              show={showWalletOption}
              onCancel={() => setShowWalletOption(false)}
              sendPayment={sendPayment}
              title="Pay with"
            />
          )}
        </WalletContext>
      ) : error ? (
        <Navigate to="*" />
      ) : null}
    </Fragment>
  );
};
export default Checkout;