"use strict";

exports.__esModule = true;
exports.renderMarketingCard = exports.MarketingCardSkeleton = void 0;
var _react = _interopRequireWildcard(require("react"));
var _designSystem = require("@wix/design-system");
var _SuggestionCtaWrapper = require("./SuggestionCtaWrapper");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Suggestions/MarketingCard.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * Schema for marketing card content.
 * This defines the structure expected in offer.asset.creative for MarketingCard rendering.
 */

const getCardWidth = totalOffers => {
  if (totalOffers === 1) {
    return '100%';
  }
  if (totalOffers === 2) {
    return '50%';
  }
  return '550px';
};
const MarketingCardInternal = /*#__PURE__*/(0, _react.forwardRef)(({
  schema,
  totalOffers,
  offerId
}, ref) => {
  const {
    title,
    description: descriptionData,
    imageUrl,
    ctaButton: ctaButtonData,
    badge: badgeData
  } = schema;
  const handleCtaClick = () => {
    if (ctaButtonData != null && ctaButtonData.link) {
      window.open(ctaButtonData.link, '_blank');
    }
  };
  const handleLearnMoreClick = () => {
    var _descriptionData$lear;
    if (descriptionData != null && (_descriptionData$lear = descriptionData.learnMore) != null && _descriptionData$lear.link) {
      window.open(descriptionData.learnMore.link, '_blank');
    }
  };
  const description = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    secondary: true,
    dataHook: "suggestions-card-subtitle",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 7
    }
  }, descriptionData.text, ' '), descriptionData.learnMore && /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    size: "small",
    secondary: true,
    dataHook: "suggestions-card-learn-more",
    onClick: handleLearnMoreClick,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 9
    }
  }, descriptionData.learnMore.text ?? 'Learn more'));
  const ctaButton = ctaButtonData ? /*#__PURE__*/_react.default.createElement(_SuggestionCtaWrapper.SuggestionCtaWrapper, {
    offerId: offerId,
    referredUrl: ctaButtonData.link,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 106,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
    size: "small",
    skin: ctaButtonData.skin || 'standard',
    priority: ctaButtonData.priority || 'secondary',
    dataHook: "suggestions-card-button",
    onClick: handleCtaClick,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107,
      columnNumber: 7
    }
  }, ctaButtonData.text)) : null;
  const badge = badgeData ? /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
    skin: badgeData.skin || 'general',
    size: "small",
    dataHook: "suggestion-card-badge",
    uppercase: false,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 5
    }
  }, badgeData.text) : null;
  const image = /*#__PURE__*/_react.default.createElement(_designSystem.Image, {
    src: imageUrl,
    width: 96,
    height: 96,
    borderRadius: "8px",
    dataHook: "suggestions-card-image",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 5
    }
  });
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "suggestions-card",
    width: getCardWidth(totalOffers),
    ref: ref,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Card, {
    stretchVertically: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 146,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.MarketingLayout, {
    title: title,
    description: description,
    image: image,
    actions: [ctaButton],
    badge: badge,
    hiddenBadge: !badge,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 147,
      columnNumber: 9
    }
  })));
});

/**
 * Creates a render function for marketing cards.
 * @param transformOffer - Optional function to transform offer data into MarketingCardSchema.
 *                         If not provided, uses offer.asset.creative directly.
 * @returns A render function compatible with Suggestions.renderCard prop.
 */
const renderMarketingCard = transformOffer => props => {
  var _props$offer, _schema$description;
  const schema = transformOffer ? transformOffer(props.offer) : (_props$offer = props.offer) == null || (_props$offer = _props$offer.asset) == null ? void 0 : _props$offer.creative;
  const requiredFieldsExist = (schema == null ? void 0 : schema.title) && (schema == null ? void 0 : schema.imageUrl) && (schema == null || (_schema$description = schema.description) == null ? void 0 : _schema$description.text);
  if (!requiredFieldsExist) {
    console.error(`Can't render MarketingCard for offer ${props.offer.offerGuid} - missing required fields (title, imageUrl, description.text) in schema:`, schema);
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(MarketingCardInternal, {
    schema: schema,
    totalOffers: props.totalOffers,
    offerId: props.offer.offerGuid ?? '',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 185,
      columnNumber: 7
    }
  });
};

/**
 * Skeleton component for MarketingCard during loading state.
 */
exports.renderMarketingCard = renderMarketingCard;
const MarketingCardSkeleton = ({
  totalOffers
}) => {
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "suggestions-card",
    width: getCardWidth(totalOffers),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 200,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Card, {
    stretchVertically: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 201,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.MarketingLayout, {
    title: /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
      width: "120px",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 203,
        columnNumber: 18
      }
    }),
    description: /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
      width: "168px",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 204,
        columnNumber: 24
      }
    }),
    actions: [/*#__PURE__*/_react.default.createElement(_designSystem.SkeletonRectangle, {
      width: "72px",
      height: "30px",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 205,
        columnNumber: 21
      }
    })],
    image: /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonRectangle, {
      width: "96px",
      height: "96px",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 206,
        columnNumber: 18
      }
    }),
    badge: /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 207,
        columnNumber: 18
      }
    }),
    hiddenBadge: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 202,
      columnNumber: 9
    }
  })));
};
exports.MarketingCardSkeleton = MarketingCardSkeleton;
//# sourceMappingURL=MarketingCard.js.map