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

function VirtualCardAction({ walletItem, payment }) {

  // virtual add card popout
  const [popup, setPopup] = useState({ show: false, name: '', data: {} }); 

    /*OPENS the virtual add card popout*/
  const openPopUp = (name, value) => {
    setPopup({
      show: true,
      name: name,
      data: { ...value },
    });
  };

  /*Closes the virtual add card popout*/
  const closePopUp = () => {
    setPopup({ show: false, name: '', data: {} });
    // dispatch(tableReload({ type: "WALLETTABLE" }));
  };

  return (
    <div className="counters w-full flex justify-end gap-2">

      {/* EXTRA ACTIONS BTN */}
      <div className="w-1/2 flex justify-end items-center">
        <button
          className="logout-btn btn-gradient text-white"
          onClick={() => {
            openPopUp('view_card',{
              payment: payment,
              currency: walletItem?.description,
            });
          }}
        >
          View Card
        </button>
      </div>

      {/* VIRTUAL CARD POPOUT */}
      {(popup.show && popup.name=='view_card') && (
        <ViewVirtualCardPopout
          details={popup.data}
          walletItem={walletItem}
          onClose={closePopUp}
          situation={popup.show}
        />
      )}

    </div>
  );
}

export default VirtualCardAction;