import React, { useEffect, useState } from "react";
import usersService from "../../services/UsersService";
import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
import NairaWithdraw from "./Popup/NairaWithdraw";

function WalletAction({ walletItem, payment, openPopUp }) {
  const [showNairaWithdraw, setShowNairaWithdraw] = useState({
    show: false,
    state: {},
  }); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP

  const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
    show: false,
    state: {},
  }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP

  return (
    <div className="counters w-full flex justify-between gap-2">
      <div className="w-1/2 flex justify-start items-center">
        <button
          onClick={() => {
            setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
          }}
          className={`${
            walletItem.code != "NAIRA" && "invisible"
          } logout-btn btn-gradient text-white`}
        >
          Spend
        </button>
      </div>
      <div className="w-1/2 flex justify-end items-center">
        <button
          className="logout-btn btn-gradient text-white"
          onClick={() => {
            openPopUp({
              payment: payment,
              currency: walletItem?.description,
            });
          }}
        >
          Add Credit
        </button>
      </div>

      {showNairaWithdraw.show && (
        <NairaWithdraw
          wallet={walletItem}
          action={() => {
            setShowNairaWithdraw((prev) => ({
              ...prev,
              show: !prev.show,
            }));
          }}
          situation={showNairaWithdraw.show}
          state={showNairaWithdraw.state}
          setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
        />
      )}

      {showConfirmNairaWithdraw.show && (
        <ConfirmNairaWithdraw
          wallet={walletItem}
          state={showConfirmNairaWithdraw.state}
          action={() => {
            setShowConfirmNairaWithdraw((prev) => ({
              ...prev,
              show: !prev.show,
            }));
          }}
          setShowNairaWithdraw={setShowNairaWithdraw}
          situation={showConfirmNairaWithdraw.show}
        />
      )}
    </div>
  );
}

export default WalletAction;