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

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

  const userApi = new usersService();

  // Get Country Api
  const getCountryList = useCallback(async () => {
    const res = await userApi.getSignupCountryData();

    try {
      if (res.status === 200) {
        const { signup_country } = await res.data;
        setCountries(signup_country);
      } else if (res.data.result !== 100) {
        setCountries("Nothing see here!");
      }
    } catch (error) {
      throw new Error(error);
    }
  }, []);

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

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

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

export default WalletAction;