/**
 * ProductCardLayouts – internal layout sub-components for ProductCard
 *
 * Not exported from the package. Each layout renders the same product data
 * with different visual emphasis.
 */
import React, { useEffect } from "react";
import { ImageDisplay } from "../primitives/ImageDisplay";
import { PriceDisplay } from "../primitives/PriceDisplay";
import { BadgeList } from "../primitives/BadgeList";
import { RatingDisplay } from "../primitives/RatingDisplay";
import { VariantSwatches } from "../primitives/VariantSwatches";
import { ActionButtons } from "../primitives/ActionButtons";
import { ensureSeekoraStyles } from "../../styles/inject";
/**
 * Resolve the Storefront API MoneyV2 currency code (e.g. "USD") for a product.
 * Prefers the typed `currencyCode` field, then the raw search-doc shape carried
 * in `metadata.priceRange.minVariantPrice.currencyCode`. Returns undefined when
 * absent so PriceDisplay falls back to legacy symbol formatting.
 */
function resolveCurrencyCode(product) {
    return (product.currencyCode ??
        product.metadata?.priceRange?.minVariantPrice?.currencyCode ??
        undefined);
}
function ImageBlock({ images, title, imageVariant, aspectRatio, objectFit, enableZoom, zoomMode, zoomLevel, }) {
    const ar = aspectRatio
        ? aspectRatio.includes(":")
            ? aspectRatio.replace(":", "/")
            : aspectRatio
        : "1";
    if (images.length > 0) {
        return (React.createElement("div", { className: "seekora-product-card__image-wrap seekora-product-card__image" },
            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : "single", alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
    }
    return (React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, "aria-hidden": true }));
}
/** minimal: image, title, price (current default behavior) */
export function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, objectFit: displayConfig.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
        React.createElement("span", { className: "seekora-product-card__title" }, title),
        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price" },
            product.currency ?? "$",
            price.toFixed(2)))));
}
/** standard: image, badges, brand, title, price + compare price, color swatches */
export function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const cfg = displayConfig;
    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
    const isOverlayPosition = actionButtonsPosition?.startsWith("overlay");
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "seekora-product-card__image-wrap" },
            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === "overlay-top-right"
                    ? "top-right"
                    : "bottom-center", showLabels: showActionLabels, size: "small" }))),
        React.createElement("div", { className: "seekora-product-card__body" },
            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand" }, brand)),
            React.createElement("span", { className: "seekora-product-card__title" }, title),
            React.createElement("div", { className: "seekora-product-card__price" },
                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyCode: resolveCurrencyCode(product), currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount })),
            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
}
/** detailed: image, badges, brand, title, price + compare + discount, rating, all swatches, stock */
export function DetailedLayout({ images, title, price, comparePrice, brand, badges, priceRange, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const cfg = displayConfig;
    const available = product.available;
    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
    const isOverlayPosition = actionButtonsPosition?.startsWith("overlay");
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "seekora-product-card__image-wrap" },
            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === "overlay-top-right"
                    ? "top-right"
                    : "bottom-center", showLabels: showActionLabels, size: "small" }))),
        React.createElement("div", { className: "seekora-product-card__body" },
            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand" }, brand)),
            React.createElement("span", { className: "seekora-product-card__title" }, title),
            cfg.showRating !== false && product.rating != null && (React.createElement(RatingDisplay, { rating: product.rating, reviewCount: product.reviewCount, variant: "compact", size: "small", showNumeric: false, showReviewCount: true, className: "seekora-product-card__rating" })),
            React.createElement("div", { className: "seekora-product-card__price" }, cfg.showPriceRange && priceRange ? (React.createElement(PriceDisplay, { priceRange: priceRange, currency: cfg.currency ?? product.currency, currencyCode: resolveCurrencyCode(product), currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals })) : (React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyCode: resolveCurrencyCode(product), currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount }))),
            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
            cfg.showStock !== false && available != null && (React.createElement("span", { className: available
                    ? "seekora-product-card__stock--in"
                    : "seekora-product-card__stock--out" }, available ? "In Stock" : "Out of Stock")),
            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
}
/** compact: smaller image, 1-line title, price */
export function CompactLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio ?? "1:1", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
        React.createElement("span", { className: "seekora-product-card__title" }, title),
        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price" },
            product.currency ?? "$",
            price.toFixed(2)))));
}
/** horizontal: image left + content right (title, brand, price, swatches) */
export function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const cfg = displayConfig;
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "seekora-product-card__image-wrap" },
            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: "1:1", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 1 })),
            actionButtons &&
                actionButtons.length > 0 &&
                actionButtonsPosition?.startsWith("overlay") && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === "overlay-top-right"
                    ? "top-right"
                    : "bottom-center", showLabels: showActionLabels, size: "small" }))),
        React.createElement("div", { className: "seekora-product-card__body" },
            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand" }, brand)),
            React.createElement("span", { className: "seekora-product-card__title" }, title),
            React.createElement("div", { className: "seekora-product-card__price" },
                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyCode: resolveCurrencyCode(product), currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount })),
            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues ?? 3, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
            actionButtons &&
                actionButtons.length > 0 &&
                actionButtonsPosition === "inline" && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
}
