import React, { forwardRef } from 'react';
import { Box, MarketingLayout, SkeletonLine, Card, Button, Image, Text, TextButton, Badge, SkeletonRectangle, } from '@wix/design-system';
import { SuggestionCtaWrapper } from './SuggestionCtaWrapper';
const getCardWidth = (totalOffers) => {
    if (totalOffers === 1) {
        return '100%';
    }
    if (totalOffers === 2) {
        return '50%';
    }
    return '550px';
};
const MarketingCardInternal = forwardRef(({ schema, totalOffers, offerId }, ref) => {
    const { title, description: descriptionData, imageUrl, ctaButton: ctaButtonData, badge: badgeData, } = schema;
    const handleCtaClick = () => {
        if (ctaButtonData?.link) {
            window.open(ctaButtonData.link, '_blank');
        }
    };
    const handleLearnMoreClick = () => {
        if (descriptionData?.learnMore?.link) {
            window.open(descriptionData.learnMore.link, '_blank');
        }
    };
    const description = (React.createElement(React.Fragment, null,
        React.createElement(Text, { size: "small", secondary: true, dataHook: "suggestions-card-subtitle" },
            descriptionData.text,
            ' '),
        descriptionData.learnMore && (React.createElement(TextButton, { size: "small", secondary: true, dataHook: "suggestions-card-learn-more", onClick: handleLearnMoreClick }, descriptionData.learnMore.text ?? 'Learn more'))));
    const ctaButton = ctaButtonData ? (React.createElement(SuggestionCtaWrapper, { offerId: offerId, referredUrl: ctaButtonData.link },
        React.createElement(Button, { size: "small", skin: ctaButtonData.skin || 'standard', priority: ctaButtonData.priority || 'secondary', dataHook: "suggestions-card-button", onClick: handleCtaClick }, ctaButtonData.text))) : null;
    const badge = badgeData ? (React.createElement(Badge, { skin: badgeData.skin || 'general', size: "small", dataHook: "suggestion-card-badge", uppercase: false }, badgeData.text)) : null;
    const image = (React.createElement(Image, { src: imageUrl, width: 96, height: 96, borderRadius: "8px", dataHook: "suggestions-card-image" }));
    return (React.createElement(Box, { dataHook: "suggestions-card", width: getCardWidth(totalOffers), ref: ref },
        React.createElement(Card, { stretchVertically: true },
            React.createElement(MarketingLayout, { title: title, description: description, image: image, actions: [ctaButton], badge: badge, hiddenBadge: !badge }))));
});
/**
 * 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.
 */
export const renderMarketingCard = (transformOffer) => (props) => {
    const schema = transformOffer
        ? transformOffer(props.offer)
        : props.offer?.asset?.creative;
    const requiredFieldsExist = schema?.title && schema?.imageUrl && 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 (React.createElement(MarketingCardInternal, { schema: schema, totalOffers: props.totalOffers, offerId: props.offer.offerGuid ?? '' }));
};
/**
 * Skeleton component for MarketingCard during loading state.
 */
export const MarketingCardSkeleton = ({ totalOffers, }) => {
    return (React.createElement(Box, { dataHook: "suggestions-card", width: getCardWidth(totalOffers) },
        React.createElement(Card, { stretchVertically: true },
            React.createElement(MarketingLayout, { title: React.createElement(SkeletonLine, { width: "120px" }), description: React.createElement(SkeletonLine, { width: "168px" }), actions: [React.createElement(SkeletonRectangle, { width: "72px", height: "30px" })], image: React.createElement(SkeletonRectangle, { width: "96px", height: "96px" }), badge: React.createElement(Badge, null), hiddenBadge: true }))));
};
//# sourceMappingURL=MarketingCard.js.map