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

import cardIcon from "../../../public/img/card-icon.png";
import { Asset, Option, PaymentsMethod } from "../../types/payments";
import CustomNextImage from "../CustomNextImage";

export type PaymentAssetItemComponentProps = {
  paymentMethodData: PaymentsMethod;
  item: Asset;
  selectedItem: number;
  option: Option;
  handleItemClick: () => void;
  haveCommission?: boolean;
};

export default function PaymentAssetItemComponent({
  paymentMethodData,
  item,
  selectedItem,
  option,
  handleItemClick,
  haveCommission = false,
}: PaymentAssetItemComponentProps) {
  //
  let isEligible = false;
  let msg = option.restricted.msg;

  if (option.restricted.status === false) {
    isEligible = true;
  }

  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 ${
            selectedItem === item.id
              ? "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 cursor-pointer`}
          onClick={isEligible ? handleItemClick : () => {}}
        >
          <div className="text-center w-fit mx-auto mb-2">
            <Typography
              variant="lead"
              className="text-xs font-medium p-2 rounded-xl bg-[#FEF3C7] text-[#D97706]"
            >
              Uses {option.minPercentage}%
            </Typography>
          </div>

          <CustomNextImage
            src={cardIcon.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"
          >
            {option.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>
          ))}
          {haveCommission && (
            <Typography
              variant="lead"
              className="text-xs font-medium text-slate-500 mb-3"
            >
              CV: {option.commissions.totalCV} VP: {option.commissions.totalVP}
            </Typography>
          )}
        </li>
      </Tooltip>
    </>
  );
}
