import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
import localImgLoad from "../../lib/localImgLoad";
import { tableReload } from "../../store/TableReloads";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import CreditPopup from "./Popup/CreditPopup";
import WalletAction from "./WalletAction";

/**
 * Renders a card displaying information about a wallet item.
 */
export default function WalletItemCard({ walletItem, payment, countries }) {
  
  const dispatch = useDispatch();
  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });

  /**
   * Opens the credit popup.
   * @param {Object} value - The value object.
   */
  const openPopUp = (value) => {
    setCreditPopup({
      show: true,
      data: { ...value },
    });
  };

  /**
   * Closes the credit popup and dispatches a table reload action.
   */
  const closePopUp = () => {
    setCreditPopup({ show: false, data: {} });
    dispatch(tableReload({ type: "WALLETTABLE" }));
  };

  const currentWalletCurrency = countries
    .map((country) => country)
    .filter((country) => country[0] === walletItem.country);

  const image = walletItem.code
    ? `${walletItem.code.toLowerCase()}.svg`
    : "default.png";


  return (
    <>
      <div
        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
        style={{
          background: `url(${background}) 0% 0% / cover no-repeat`,
        }}
      >
        <div className="wallet w-full flex justify-between items-start gap-3">
          <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
            <img
              src={localImgLoad(`images/currency/${image}`)}
              className="w-full h-full"
              alt="currency-icon"
            />
          </div>
          <div className="balance w-full mt-2 flex justify-center">
            <div className="">
              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
                Current Balance
              </p>
              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
                {PriceFormatter(
                  walletItem.amount * 0.01,
                  walletItem.code,
                  undefined,
                  "text-[2rem]"
                )}
              </p>
            </div>
          </div>
        </div>

        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
          HOLDINGS :{" "}
          <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
            {PriceFormatter(
              walletItem.escrow * 0.01,
              walletItem.code,
              undefined,
              "text-[2rem]"
            )}
          </span>
        </p>

        <div className="my-2 w-full h-[1px] bg-white"></div>

        <WalletAction
          walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
          payment={payment}
          openPopUp={openPopUp}
        />
      </div>

      {creditPopup.show && (
        <CreditPopup
          details={creditPopup.data}
          walletItem={walletItem}
          onClose={closePopUp}
          situation={openPopUp}
        />
      )}
    </>
  );
}