import { useEffect, useState } from "react";
import background from "../../assets/images/bg-sky-blue.jpg";
import { localImgLoad } from "../../lib";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
import {PriceFormatter} from '../Helpers/PriceFormatter'

/**
 * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
 */
export default function FamilyWalletBox({ wallet, payment }) {
  // const { loading, data } = wallet;

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

  const [selectedWallet, setSelectedWallet] = useState("");

  const [activeWalletBtn, setActiveWalletBtn] = useState("");

  const handleChangeWallet = ({ target: { name } }) => {
    // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
    const currentWalletSelected = wallet?.data?.filter(
      (item) => item.description == name
    );
    setSelectedWallet(currentWalletSelected[0]);
    setActiveWalletBtn(name);
    // console.log(name, currentWalletSelected)
  };

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

  useEffect(() => {
    setSelectedWallet(wallet.data[0]);
    setActiveWalletBtn(wallet?.data[0]?.description);
  }, [wallet]);

  return (
    <div className="w-full">
      <div className="my-wallet-wrapper w-full">
        <div className="main-wrapper w-full mb-10">
          <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
            <div className="w-full mb-4 sm:mb-0 rounded-2xl bg-white dark:bg-dark-white overflow-hidden">
              {wallet?.loading ? (
                <div className="w-full h-full flex items-center justify-center bg-white">
                  <LoadingSpinner
                    size="16"
                    color="sky-blue"
                    height="min-h-[240px]"
                  />
                </div>
              ) : wallet?.data?.length > 0 ? (
                <>
                  {wallet?.data?.length > 1 && (
                    <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
                      {wallet?.data?.map((item, index) => (
                        <button
                          className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${
                            activeWalletBtn == item?.description && "bg-orange-500"
                          }`}
                          key={item?.wallet_uid+index}
                          name={item?.description}
                          onClick={handleChangeWallet}
                        >
                          {item?.description}
                        </button>
                      ))}
                    </div>
                  )}
                  <div
                    className="p-5 bg-white-opacity min-h-[240px] flex justify-end items-center"
                    style={{
                      background: `url(${selectedWallet?.banner}) 0% 0% / cover no-repeat`,
                    }}
                  >
                    {/* image */}
                    {/* <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] 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='flex flex-col justify-center'>
                      <p className="text-base sm:text-lg text-white tracking-wide my-3 text-center">
                        Current Balance
                      </p>
                      {selectedWallet?.brand && selectedWallet?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
                      <p className="text-2xl font-bold text-white dark:text-white leading-10">
                        {selectedWallet.brand} <span> **** **** ***** </span> {selectedWallet?.card_last4}
                      </p>
                      :
                      <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
                        {PriceFormatter(
                          selectedWallet?.amount / 100,
                          selectedWallet?.code,
                          undefined,
                          "text-[2rem]"
                        )}
                      </p>
                      }
                    </div>
                  </div>
                </>
              ) : (
                <div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">
                  <p>No Wallet Record Found</p>
                </div>
              )}
            </div>
            <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
              <h1 className="text-xl font-bold text-black dark:text-white">
                Recent Activities
              </h1>
            </div>
          </div>
        </div>
        <div className="w-full">
          <FamilyWalletRedeemOptions />
        </div>
      </div>
    </div>
  );
}

// data.length>0 && data.map((item) => (
//   <div key={item.wallet_uid} className="w-full h-full mb-10 ">
//     {/* <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} /> */}
//   </div>
// ))