import { Tooltip, Typography } from "@material-tailwind/react";

import walletIcon from "../../../public/img/wallet-icon.png";
import { _useScopedI18n } from "../../i18n/client";
import { Asset, Option, PaymentsMethod } from "../../types/payments";
import { displayExactWalletBalance } from "../../utils/app.util";
import CustomNextImage from "../CustomNextImage";

export type PaybyWalletItemComponentProps = {
  paymentMethodData: PaymentsMethod;
  item: Option;
  asset: Asset;
  selectedOption: Option;
  grandTotal: number;
  handleItemClick: () => void;
};

export default function PaybyWalletItemComponent({
  paymentMethodData,
  item,
  asset,
  selectedOption,
  grandTotal,
  handleItemClick,
}: PaybyWalletItemComponentProps) {
  //
  const scopeT = _useScopedI18n("payment.paybyWalletItemComponent");

  let isEligible = false;
  let msg = item.restricted.msg;
  const minBalance = asset.isVariable ? 0 : grandTotal;

  if (item.balance > minBalance && item.restricted.status === false) {
    isEligible = true;
  } else {
    if (!item.restricted.status) {
      msg = scopeT("insufficientBalanceMsg");
    }
  }

  return (
    <>
      <Tooltip
        placement="top"
        content={`${msg}`}
        animate={{
          mount: { scale: 1, y: 0 },
          unmount: { scale: 0, y: 25 },
        }}
        className={`bg-red-600 ${isEligible ? "hidden" : ""}`}
        interactive={!isEligible}
      >
        <li
          className={`border grow ${
            selectedOption?.id === item.id && isEligible
              ? "border-purple-500 bg-purple-50" // Selected border color
              : "border-slate-100 bg-gray-50/30" // Default border color
          } ${!isEligible ? "cursor-not-allowed opacity-80" : "cursor-pointer"} rounded-xl p-4 text-center `}
          onClick={() => {
            if (isEligible) handleItemClick();
          }}
        >
          <div className="text-right mb-2">
            <Typography
              variant="lead"
              className="text-xs font-medium text-yellow-700"
            >
              {asset.isVariable
                ? "Variable pay"
                : `Uses ${item.minPercentage}%`}
            </Typography>
          </div>

          <CustomNextImage
            src={walletIcon.src}
            alt="walletIcon"
            className={`mx-auto my-2 ${isEligible ? "" : "grayscale"}`}
            height={80}
            width={80}
          />

          <Typography
            variant="lead"
            className="text-sm font-semibold text-black-500 mb-1"
          >
            {asset.isVariable
              ? `${`${asset.name} + ${item.name}`}`
              : `${item.name}`}
          </Typography>

          {paymentMethodData.paymentFees.map((fee, feeIndex) => (
            <Typography
              key={feeIndex}
              variant="lead"
              className="text-xs font-normal text-slate-500 mb-2"
            >
              {fee.name}
            </Typography>
          ))}

          <Typography
            variant="lead"
            className="text-xs font-semibold text-gray-300"
          >
            {scopeT("avlBalance")}:{" "}
            {displayExactWalletBalance(`${item.balance}`)} {item.name}
          </Typography>
        </li>
      </Tooltip>
    </>
  );
}
