import React from 'react';
import { W as WalletCategoryTypes } from './index-28917993.js';
import { a as TYPE_TO_IMG_SRC, b as TYPE_TO_WALLET_DARK_COLOR } from './index-cbe3a76a.js';
import { B as BadgeDisplayIcon, A as AwardDisplayIcon, a as CourseDisplayIcon, I as IDDisplayIcon, C as CertificateDisplayIcon } from './IDDisplayIcon-d87174fd.js';
import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
import { c as categorizeSkills } from './credential.helpers-30058000.js';
import { T as ThreeDotVertical } from './ThreeDotVertical-ccbbc8ef.js';
import { C as CircleCheckButton } from './CircleCheckButton-23a9c7d4.js';

const AlignmentSkillsCount = ({
  credential,
  onClick,
  className = ""
}) => {
  var _a, _b, _c, _d;
  if (!credential) return /* @__PURE__ */ React.createElement(React.Fragment, null);
  const achievement = (_a = credential == null ? void 0 : credential.credentialSubject) == null ? void 0 : _a.achievement;
  let alignmentCount = ((_b = achievement == null ? void 0 : achievement.alignment) == null ? void 0 : _b.length) || 0;
  if (alignmentCount === 0 && ((_c = credential.skills) == null ? void 0 : _c.length) > 0) {
    const skillsMap = categorizeSkills((_d = credential.skills) != null ? _d : []);
    const totalSkills = Object.values(skillsMap).reduce(
      (total2, category) => total2 + (category == null ? void 0 : category.length),
      0
    );
    const totalSubskills = Object.values(skillsMap).reduce(
      (total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0),
      0
    );
    const total = totalSkills + totalSubskills;
    alignmentCount = total;
  }
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      role: onClick ? "button" : void 0,
      onClick,
      className: `px-[10px] py-[2px] flex gap-[3px] items-center rounded-[5px] overflow-hidden bg-violet-100 ${className}`
    },
    /* @__PURE__ */ React.createElement(PuzzlePiece, { className: "w-[20px] h-[20px] text-grayscale-800", version: "filled" }),
    /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-grayscale-800 font-poppins font-[600]" }, `${alignmentCount} Skill${alignmentCount !== 1 ? "s" : ""}`)
  );
};

const getDisplayIcon = (displayType) => {
  switch (displayType) {
    case "badge" /* Badge */:
      return BadgeDisplayIcon;
    case "certificate" /* Certificate */:
      return CertificateDisplayIcon;
    case "id" /* ID */:
      return IDDisplayIcon;
    case "course" /* Course */:
      return CourseDisplayIcon;
    case "award" /* Award */:
      return AwardDisplayIcon;
    default:
      return BadgeDisplayIcon;
  }
};

const BoostGenericCard = ({
  title,
  customTitle,
  thumbImgSrc,
  customThumbClass = "",
  customHeaderClass = "",
  type = WalletCategoryTypes.achievements,
  className,
  onCheckClick,
  showChecked,
  checkStatus,
  customThumbComponent,
  innerOnClick,
  bgImgSrc,
  issuerName,
  customIssuerName,
  dateDisplay,
  customDateDisplay,
  optionsTriggerOnClick,
  verifierBadge,
  credential,
  isInSkillsModal,
  displayType,
  linkedCredentialsCount = 0,
  linkedCredentialsClassName = "",
  checkBtnClass = ""
}) => {
  var _a;
  const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` : "bg-grayscale-50";
  const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;
  const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
  const handleInnerClick = () => innerOnClick == null ? void 0 : innerOnClick();
  const handleOptionsClick = () => optionsTriggerOnClick == null ? void 0 : optionsTriggerOnClick();
  const DisplayIcon = getDisplayIcon(displayType);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[285px] rounded-[20px] overflow-hidden ${className}`
    },
    optionsTriggerOnClick && /* @__PURE__ */ React.createElement(
      "section",
      {
        className: "absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full bg-white/70 flex items-center justify-center z-20",
        onClick: handleOptionsClick
      },
      /* @__PURE__ */ React.createElement(ThreeDotVertical, { className: "h-[20px] w-[20px] text-grayscale-900" })
    ),
    bgImgSrc && /* @__PURE__ */ React.createElement("section", { className: "absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0" }, /* @__PURE__ */ React.createElement("img", { className: "h-full w-full object-cover", src: bgImgSrc })),
    /* @__PURE__ */ React.createElement(
      "button",
      {
        type: "button",
        className: "z-10 flex flex-col flex-grow",
        onClick: handleInnerClick
      },
      customThumbComponent || /* @__PURE__ */ React.createElement("section", { className: defaultThumbClass }, (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) ? /* @__PURE__ */ React.createElement(
        "img",
        {
          className: "w-full h-full rounded-full object-cover",
          src: thumbImgSrc,
          alt: "Credential Achievement"
        }
      ) : /* @__PURE__ */ React.createElement(
        "img",
        {
          className: "max-w-full p-0 object-cover rounded-full",
          src: imgSrc
        }
      )),
      /* @__PURE__ */ React.createElement(
        "section",
        {
          className: `flex flex-col flex-grow items-center justify-end pt-1 w-full ${linkedCredentialsCount === 0 ? "pb-[20px]" : ""}`
        },
        /* @__PURE__ */ React.createElement("div", { className: "px-1 flex flex-col items-center justify-center w-full" }, !customTitle ? /* @__PURE__ */ React.createElement(
          "p",
          {
            className: `
                                ${customHeaderClass}
                                font-medium text-center text-grayscale-900 line-clamp-2
                                h-[50px] flex items-center justify-center
                                ${((_a = title == null ? void 0 : title.length) != null ? _a : 0) > 35 ? "text-[13px] leading-tight" : "text-[16px]"}
                            `,
            title
          },
          title
        ) : customTitle, customIssuerName || /* @__PURE__ */ React.createElement("span", { className: "text-[12px] text-grayscale-700 mt-1" }, "by ", /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, issuerName)), customDateDisplay || /* @__PURE__ */ React.createElement("div", { className: "text-[11px] text-grayscale-700 mt-1 flex flex-col items-center" }, verifierBadge, /* @__PURE__ */ React.createElement("span", null, dateDisplay)), isInSkillsModal && credential && /* @__PURE__ */ React.createElement(
          AlignmentSkillsCount,
          {
            credential,
            onClick: handleInnerClick,
            className: "mt-[16px]"
          }
        )),
        linkedCredentialsCount > 0 && /* @__PURE__ */ React.createElement(
          "div",
          {
            className: `mt-auto flex items-center justify-center py-1 w-full ${linkedCredentialsClassName}`
          },
          /* @__PURE__ */ React.createElement(DisplayIcon, { className: "h-[20px] w-[20px] text-grayscale-900" }),
          /* @__PURE__ */ React.createElement("span", { className: "ml-1 text-sm font-semibold text-grayscale-900" }, "+", linkedCredentialsCount, " Linked")
        )
      )
    ),
    showChecked && /* @__PURE__ */ React.createElement("div", { className: "absolute top-[5px] left-[5px] z-20" }, /* @__PURE__ */ React.createElement(
      CircleCheckButton,
      {
        checked: checkStatus,
        onClick: onCheckClick,
        className: checkBtnClass
      }
    ))
  );
};

export { BoostGenericCard as B };
//# sourceMappingURL=BoostGenericCard-39cf631c.js.map
