import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";

import usersService from "../../services/UsersService";

function ConfirmTransfer({ payment, wallet }) {
  const apiURL = new usersService();

  const navigate = useNavigate();

  let { state } = useLocation();

  let [requestStatus, setRequestStatus] = useState({
    message: "",
    loading: false,
    status: false,
  });
  let [pageLoading, setPageLoading] = useState(true);

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = () => {
    setRequestStatus({ message: "", loading: true, status: false });
    let reqData = {
      amount: Number(state.amount),
      Fee: Number(state.fee),
      recipientid: Number(state.recipientID),
    };
    apiURL
      .sendMoney(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
          setRequestStatus({
            message: "Could not perform transaction",
            loading: false,
            status: false,
          });
          return;
        }
        setRequestStatus({
          message: "transfer successful",
          loading: false,
          status: true,
        });
        toast.success("Transfer sucessful");
        setTimeout(() => {
          navigate("/my-wallet", { replace: true });
          window.location.reload(true);
        }, 1000);
      })
      .catch((error) => {
        setRequestStatus({
          message: "Opps! something went wrong! Try Again",
          loading: false,
          status: false,
        });
      });
  };

  useEffect(() => {
    // what happens if not state redirect user
    if (!state) {
      navigate("/my-wallet/transfer-fund", { replace: true });
    } else {
      setPageLoading(false);
    }
  }, []);
  return (
    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
      {pageLoading ? (
        <LoadingSpinner size="8" color="sky-blue" />
      ) : (
        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
            <div className="px-4 md:px-8 py-4">
              {wallet.loading ? (
                <LoadingSpinner size="8" color="sky-blue" />
              ) : wallet.data.length ? (
                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
                  {wallet.data.map((item) => {
                    if (item.description == "Naira") {
                      return `Withdraw from Naira Wallet : ${item.symbol}${(
                        item.amount * 0.01
                      ).toFixed(2)}`;
                    }
                  })}
                </h2>
              ) : wallet.error ? (
                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
                  Opps! An Error Occured
                </h2>
              ) : (
                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
                  No Wallet Information Found!
                </h2>
              )}
            </div>
            <hr />
            <div className="px-4 md:px-8 py-4 add-fund-info">
              <h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
                Confirm Withdraw to Account
              </h2>
              {/* AMOUNT */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Amount:"
                  type="text"
                  name="amount"
                  value={state?.amount || ""}
                  disable={true}
                />
              </div>

              {/* RECIPIENT ACC: */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Recipient Acc:"
                  type="text"
                  name="recipient"
                  value={state?.details.recipient || ""}
                  disable={true}
                />
              </div>

              {/* PROCESSING FEE: */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Processing Fee:"
                  type="text"
                  name="processingFee"
                  value={state?.fee || ""}
                  disable={true}
                />
              </div>

              {/* TOTAL */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Total"
                  type="text"
                  name="total"
                  value={state?.total || ""}
                  disable={true}
                />
              </div>

              {/* COMMENT/NOTE */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Comment/Note:"
                  type="text"
                  name="comment"
                  value={state?.comment || ""}
                  disable={true}
                />
              </div>
            </div>

            <hr />
            {requestStatus.message && (
              <p
                className={`text-base ${
                  requestStatus.status ? "text-green-500" : "text-red-500"
                } px-4 md:px-8 py-4`}
              >
                {requestStatus.message}
              </p>
            )}
            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center">
              {requestStatus.loading ? (
                <LoadingSpinner size="8" color="sky-blue" />
              ) : (
                <button
                  onClick={handleSubmit}
                  className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
                >
                  Transfer
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
        <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
            Recent Activity
          </h2>
          {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
          {payment.loading ? (
            <LoadingSpinner size="16" color="sky-blue" />
          ) : (
            <RecentActivityTable payment={payment} />
          )}
        </div>
      </div>
    </div>
  );
}

export default ConfirmTransfer;