import { skipToken } from "@reduxjs/toolkit/dist/query";
import { Row, Col, notification } from "antd";
import React, { useState, FC, Fragment } from "react";
import { Link, Navigate, useNavigate, useParams, useSearchParams } from "react-router-dom";
import AddButton from "../components/Button/AddButton";
import CustomInput from "../components/Input/CustomInput";
import LoadingDots from "../components/Loading/LoadingDots";
import { isErrorWithMessage, isFetchBaseQueryError } from "../components/types";
import {
  useRefundWalletMutation,
  useRequestRefundQuery,
} from "../services/checkout-service";
import { PublicKey } from "@solana/web3.js";

const RefundForm: FC = () => {
  const [walletAddress, setWalletAddress] = useState<string | null>("");
  const { id } = useParams<{ id: string }>();
  const [loading, setLoading] = useState<boolean>(false);
  const { data, error, isFetching, isLoading, isSuccess } =
    useRequestRefundQuery(id ?? skipToken);
  const [refundWallet] = useRefundWalletMutation();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const refundType = searchParams.get("type");

  console.log(refundType)
  function validateWalletAddress(e: any) {
    try {
      const value = e.target.value;
      const isValid: boolean = PublicKey.isOnCurve(value);
      isValid ? setWalletAddress(value) : setWalletAddress(null);
    } catch (err) {
      console.log(err);
      setWalletAddress(null);
    }
  }

  async function onConfirm() {
    if (!walletAddress || walletAddress.length < 1)
      return notification.error({
        message: "Please ensure you insert your Solana wallet address",
      });
    setLoading(true);
    let data = {
      address: walletAddress,
    };
    try {
      await refundWallet({
        data: data,
        ref: id,
      }).unwrap();
      navigate("/payment-status", {
        replace: true,
        state: {
          refund: true,
          status: true,
        },
      });

      //setShowSuccess(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);
      }
    }
    setLoading(false);
  }

  const customer = data?.data?.customer;
  const transaction = data?.data?.transaction;

  return (
    <Fragment>
      {isLoading || isFetching ? (
        <LoadingDots />
      ) : data ? (
        <div className="px-4 pb-20">
          <div className="shadow-xl max-w-lg xl:max-w-xl m-auto bg-white p-10 md:p-20 mt-20 rounded-md">
            <Row gutter={24} align="middle">
              <Col xs={24} md={12}>
                <h3 className="capitalize font-bold text-[#02084B] text-lg">
                  Refund form
                </h3>
              </Col>
              <Col xs={24} md={12}>
                <div className="text-[#CC9933]">
                  <p>
                    Amount paid: {transaction?.receivedAmountInCrypto}{" "}
                    {transaction.crypto}
                  </p>
                </div>
              </Col>
            </Row>
            <hr className="mt-5 mb-10 text-[#02084B] bg-[#02084B] opacity-30 2xl:opacity-100" />

            <div className="my-8 relative">
              <label className="text-[#2c3489] font-medium">
                Email Address
              </label>
              <CustomInput
                disabled
                value={customer.email}
                type="email"
                placeholder="Enter Email"
              />
            </div>

            <label className="text-[#2c3489] font-medium">Transaction ID</label>

            <CustomInput disabled value={data?.data?.transactionId} />

            <div className="my-8">
              <label className="text-[#2c3489] font-medium">
                Your Solana wallet address
              </label>
              <CustomInput onBlur={validateWalletAddress} />
              {walletAddress === null && (
                <span className="text-[#E31D1C] text-sm">
                  Enter a valid Solana address
                </span>
              )}
            </div>
            <div className="my-8">
              <label className="text-[#2c3489] font-medium">
                Amount to be refunded
              </label>

              <CustomInput
                type="text"
                disabled
                value={`${
                  transaction?.excessAmountReceivedInCrypto > 0
                    ? transaction?.excessAmountReceivedInCrypto
                    : transaction?.receivedAmountInCrypto
                } ${transaction.crypto}`}
              />
              <span className="text-sm text-[#E31D1C]">
                Please note that you would not be refunded the transaction fee
                for the initial transaction.
              </span>
            </div>
            <div className="flex justify-end mt-8">
              <AddButton className="w-40" onClick={onConfirm} loading={loading}>
                Submit
              </AddButton>
            </div>
            <div className="mt-8 flex gap-2 justify-center items-center">
              <span>
                <svg
                  width="12"
                  height="14"
                  viewBox="0 0 12 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M11 6H10V4C10 2.93913 9.57857 1.92172 8.82843 1.17157C8.07828 0.421427 7.06087 0 6 0C4.93913 0 3.92172 0.421427 3.17157 1.17157C2.42143 1.92172 2 2.93913 2 4V6H1L0 7V13L1 14H11L12 13V7L11 6ZM3 4C3 3.20435 3.31607 2.44129 3.87868 1.87868C4.44129 1.31607 5.20435 1 6 1C6.79565 1 7.55871 1.31607 8.12132 1.87868C8.68393 2.44129 9 3.20435 9 4V6H3V4ZM11 13H1V7H11V13Z"
                    fill="#02084B"
                  />
                </svg>
              </span>{" "}
              <div>
                <span className="text-[#02084B] text-[14px]">
                  Powered by <span className="text-[#CC9933]">Ivory</span>pay
                </span>
              </div>
            </div>
            <hr className="my-5 text-[#02084B] bg-[#02084B]" />

            <div className="text-center text-sm">
              <p>For questions and enquiries, please contact:</p>
              <Link
                className="text-[#394190] font-semibold"
                to="mailto:support@ivorypay.io"
              >
                support@ivorypay.io
              </Link>
            </div>
          </div>
        </div>
      ) : (
        <Navigate to="/404" replace={true} />
      )}
    </Fragment>
  );
};
export default RefundForm;