'use strict';

var React = require('react');
var X = require('./X.svg');
var types = require('./types-8eab1382.js');
var notifications = require('./notifications-56c6fc94.js');
var DefaultFace = require('./default-face.jpeg');
var Checkmark = require('./Checkmark-f611aa4d.js');
var ArrowArcLeft = require('./ArrowArcLeft.svg');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var X__default = /*#__PURE__*/_interopDefaultLegacy(X);
var DefaultFace__default = /*#__PURE__*/_interopDefaultLegacy(DefaultFace);
var ArrowArcLeft__default = /*#__PURE__*/_interopDefaultLegacy(ArrowArcLeft);

const NotificationBoostCard = ({
  title,
  customThumbComponent,
  className,
  thumbImage,
  notificationType = notifications.NotificationTypeEnum.Achievement,
  issueDate,
  issuerInfo,
  claimStatus = false,
  loadingState = false,
  handleButtonClick,
  handleCancelClick,
  handleCardClick,
  showIssuerInfo = true,
  isArchived
}) => {
  var _a, _b;
  const [isClaimed, setIsClaimed] = React.useState(claimStatus || false);
  const [isLoading, setIsLoading] = React.useState(loadingState || false);
  React.useEffect(() => {
    setIsClaimed(claimStatus);
  }, [claimStatus]);
  React.useEffect(() => {
    setIsLoading(loadingState);
  }, [loadingState]);
  const {
    iconCircleStyles,
    textStyles,
    viewButtonStyles,
    claimedButtonStyles,
    unclaimedButtonStyles,
    typeText
  } = types.NotificationTypeStyles[notificationType];
  const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
  let buttonText = "";
  if (isClaimed) {
    buttonText = "Claimed";
  } else if (!isClaimed) {
    buttonText = "Claim";
  }
  return /* @__PURE__ */ React__default["default"].createElement("div", {
    className: `flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "notification-card-left-side px-[0px] flex"
  }, !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement("div", {
    onClick: handleCardClick,
    className: `overflow-hidden cursor-pointer w-[90px] h-[90px] rounded-full flex items-start ${iconCircleStyles} notification-card-thumbnail`
  }, /* @__PURE__ */ React__default["default"].createElement("img", {
    src: thumbImage,
    alt: "Notification Thumb",
    className: "w-full h-full w-[100px] h-[100px] object-cover"
  })), customThumbComponent && { customThumbComponent }), /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "flex flex-col justify-center items-start relative w-full"
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "text-left ml-3 flex flex-col items-start justify-start w-full"
  }, /* @__PURE__ */ React__default["default"].createElement("h4", {
    onClick: handleCardClick,
    className: "cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title",
    "data-testid": "notification-title"
  }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
    className: `font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`,
    "data-testid": "notification-type"
  }, typeText, " ", issueDate && /* @__PURE__ */ React__default["default"].createElement("span", {
    className: "text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date",
    "data-testid": "notification-cred-issue-date"
  }, "\u2022 ", issueDate)), showIssuerInfo && /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "notification-card-issuer-info flex items-center mt-[10px]"
  }, /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
  }, /* @__PURE__ */ React__default["default"].createElement("img", {
    className: "h-full w-full object-cover",
    src: (issuerInfo == null ? void 0 : issuerInfo.image) || DefaultFace__default["default"],
    alt: "profile"
  })), /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "notification-issuer-info-text flex items-center px-[10px]"
  }, /* @__PURE__ */ React__default["default"].createElement("p", {
    className: "text-[13px] text-gray-700 font-medium"
  }, "From ", (issuerInfo == null ? void 0 : issuerInfo.fullName) || (issuerInfo == null ? void 0 : issuerInfo.displayName)))), /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "flex items-center justify-between mt-3 w-full"
  }, /* @__PURE__ */ React__default["default"].createElement("button", {
    className: `notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
    onClick: handleButtonClick,
    role: "button",
    name: "notification-claim-button"
  }, isClaimed && /* @__PURE__ */ React__default["default"].createElement(Checkmark.Checkmark, {
    className: "h-[24px] p-0 m-0"
  }), " ", isLoading ? "Loading..." : buttonText), /* @__PURE__ */ React__default["default"].createElement("button", {
    onClick: handleCancelClick,
    className: `rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`,
    role: "button",
    name: "notification-view-button"
  }, !isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
    src: (_a = X__default["default"]) != null ? _a : "",
    alt: "Cancel",
    className: "notification-card-x"
  }), isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
    src: (_b = ArrowArcLeft__default["default"]) != null ? _b : "",
    alt: "Cancel",
    className: "notification-card-x"
  }))))));
};

exports.NotificationBoostCard = NotificationBoostCard;
//# sourceMappingURL=NotificationBoostCard-70dfa17e.js.map
