'use strict';

var React = require('react');
var index$1 = require('./index-5488badc.js');
var index = require('./index-08002ab6.js');
var IDDisplayIcon = require('./IDDisplayIcon-62993df0.js');
var PuzzlePiece = require('./PuzzlePiece-088d2b00.js');
var credential_helpers = require('./credential.helpers-60b421b9.js');
var ThreeDotVertical = require('./ThreeDotVertical-1d221fc8.js');
var CircleCheckButton = require('./CircleCheckButton-82d47ee2.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const AlignmentSkillsCount = ({
  credential,
  onClick,
  className = ""
}) => {
  var _a, _b, _c, _d;
  if (!credential)
    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].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 = credential_helpers.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__default["default"].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__default["default"].createElement(PuzzlePiece.PuzzlePiece, {
    className: "w-[20px] h-[20px] text-grayscale-800",
    version: "filled"
  }), /* @__PURE__ */ React__default["default"].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 IDDisplayIcon.BadgeDisplayIcon;
    case "certificate" /* Certificate */:
      return IDDisplayIcon.CertificateDisplayIcon;
    case "id" /* ID */:
      return IDDisplayIcon.IDDisplayIcon;
    case "course" /* Course */:
      return IDDisplayIcon.CourseDisplayIcon;
    case "award" /* Award */:
      return IDDisplayIcon.AwardDisplayIcon;
    default:
      return IDDisplayIcon.BadgeDisplayIcon;
  }
};

const BoostGenericCard = ({
  title,
  customTitle,
  thumbImgSrc,
  customThumbClass = "",
  customHeaderClass = "",
  type = index$1.WalletCategoryTypes.achievements,
  className,
  onCheckClick,
  showChecked,
  checkStatus,
  customThumbComponent,
  innerOnClick,
  bgImgSrc,
  issuerName,
  customIssuerName,
  dateDisplay,
  customDateDisplay,
  optionsTriggerOnClick,
  verifierBadge,
  credential,
  isInSkillsModal,
  displayType,
  linkedCredentialsCount = 0,
  linkedCredentialsClassName = "",
  checkBtnClass = ""
}) => {
  const thumbClass = index.TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${index.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 : index.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__default["default"].createElement("div", {
    className: `flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[265px] rounded-[20px] overflow-hidden ${className}`
  }, optionsTriggerOnClick && /* @__PURE__ */ React__default["default"].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__default["default"].createElement(ThreeDotVertical.ThreeDotVertical, {
    className: "h-[20px] w-[20px] text-grayscale-900"
  })), bgImgSrc && /* @__PURE__ */ React__default["default"].createElement("section", {
    className: "absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0"
  }, /* @__PURE__ */ React__default["default"].createElement("img", {
    className: "h-full w-full object-cover",
    src: bgImgSrc
  })), /* @__PURE__ */ React__default["default"].createElement("button", {
    type: "button",
    className: "z-10 flex flex-col flex-grow",
    onClick: handleInnerClick
  }, customThumbComponent || /* @__PURE__ */ React__default["default"].createElement("section", {
    className: defaultThumbClass
  }, (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) ? /* @__PURE__ */ React__default["default"].createElement("img", {
    className: "w-full h-full rounded-full object-cover",
    src: thumbImgSrc,
    alt: "Credential Achievement"
  }) : /* @__PURE__ */ React__default["default"].createElement("img", {
    className: "max-w-full p-0 object-cover rounded-full",
    src: imgSrc
  })), /* @__PURE__ */ React__default["default"].createElement("section", {
    className: `flex flex-col flex-grow items-center justify-end pt-1 w-full ${linkedCredentialsCount === 0 ? "pb-[20px]" : ""}`
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "px-1 flex flex-col items-center justify-center w-full"
  }, !customTitle ? /* @__PURE__ */ React__default["default"].createElement("p", {
    className: `
                                ${customHeaderClass}
                                text-[16px] font-medium text-center text-grayscale-900 line-clamp-2
                                h-[40px] flex items-center justify-center
                            `
  }, title) : customTitle, customIssuerName || /* @__PURE__ */ React__default["default"].createElement("span", {
    className: "text-[12px] text-grayscale-700 mt-1"
  }, "by ", /* @__PURE__ */ React__default["default"].createElement("span", {
    className: "font-bold"
  }, issuerName)), customDateDisplay || /* @__PURE__ */ React__default["default"].createElement("p", {
    className: "text-[12px] text-grayscale-700 mt-1 flex items-center"
  }, verifierBadge, dateDisplay), isInSkillsModal && credential && /* @__PURE__ */ React__default["default"].createElement(AlignmentSkillsCount, {
    credential,
    onClick: handleInnerClick,
    className: "mt-[16px]"
  })), linkedCredentialsCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
    className: `mt-auto flex items-center justify-center py-1 w-full ${linkedCredentialsClassName}`
  }, /* @__PURE__ */ React__default["default"].createElement(DisplayIcon, {
    className: "h-[20px] w-[20px] text-grayscale-900"
  }), /* @__PURE__ */ React__default["default"].createElement("span", {
    className: "ml-1 text-sm font-semibold text-grayscale-900"
  }, "+", linkedCredentialsCount, " Linked")))), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "absolute top-[5px] left-[5px] z-20"
  }, /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
    checked: checkStatus,
    onClick: onCheckClick,
    className: checkBtnClass
  })));
};

exports.BoostGenericCard = BoostGenericCard;
//# sourceMappingURL=BoostGenericCard-55f710ad.js.map
