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";

/**
 * 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">
                      {Formatter(
                        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>
// ))
