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

export default function WalletItemCard({ walletItem, payment }) {
  //   const [eth] = useState(90);
  //   const [btc] = useState(85);
  //   const [ltc] = useState(20);

  const { userDetails } = useSelector((state) => state?.userDetails);
  let accountType = userDetails?.account_type == "FAMILY";

  //   Credit popup
  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });

  const openPopUp = (value) => {
    setCreditPopup({
      show: true,
      data: { ...value },
    });
  };

  const closePopUp = () => {
    setCreditPopup({ show: false, data: {} });
  };

  console.log("walletItem >>", walletItem, payment);

  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON

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

        {/* for white underline */}
        <div className="my-2 w-full h-[1px] bg-white"></div> 

        {!accountType ? (
          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
        )
        :
        null
      }
      </div>
      {creditPopup.show && (
        <CreditPopup
          details={creditPopup.data}
          walletItem={walletItem}
          onClose={closePopUp}
          situation={openPopUp}
        />
      )}
    </>
  );
}
