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

/**
 * 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.code == 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]?.code)
  },[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 =>(
                      <button 
                        className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
                        key={item?.wallet_uid} 
                        name={item?.code}
                        onClick={handleChangeWallet}
                      >
                        {item?.description}
                      </button>
                    ))}
                  </div>
                  }
                  <div className="p-5 bg-white-opacity min-h-[240px]"
                      style={{
                        background: `url(${background}) 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>
                    <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</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 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>
// ))