/**
 * PriceDisplay – reusable price display primitive
 *
 * Handles single price, compare price with strikethrough, discount percentage,
 * and price range display.
 */
import React, { useEffect } from "react";
import { clsx } from "clsx";
import { useMoney } from "@shopify/hydrogen-react";
import { ensureSeekoraStyles } from "../../styles/inject";
import { useIsShopifyAvailable } from "../../hooks/useOptionalShopContext";
const formatNum = (value, currency, position, decimals) => {
    const formatted = value.toLocaleString(undefined, {
        minimumFractionDigits: decimals,
        maximumFractionDigits: decimals,
    });
    return position === "before"
        ? `${currency}${formatted}`
        : `${formatted}${currency}`;
};
/**
 * Wrapper that calls hydrogen-react `useMoney` unconditionally and renders the
 * locale-aware `.localizedString`. Only ever RENDERED when a ShopifyProvider is
 * mounted and a currencyCode is present — this keeps the hook call unconditional
 * (Rules of Hooks) while letting the parent decide hydrogen-vs-legacy by render path.
 */
function HydrogenMoneyPrice({ amount, currencyCode, className, }) {
    // useMoney expects MoneyV2: { amount: string; currencyCode: CurrencyCode }.
    // amount is a string in the Storefront API; currencyCode is an enum upstream —
    // cast at the boundary so we don't pull the full enum types into this primitive.
    const money = useMoney({
        amount: String(amount),
        currencyCode: currencyCode,
    });
    return React.createElement("span", { className: className }, money.localizedString);
}
export function PriceDisplay({ price, comparePrice, priceRange, currency = "$", currencyPosition = "before", priceDecimals = 2, showDiscount = true, currencyCode, className, style, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const shopifyAvailable = useIsShopifyAvailable();
    // Use hydrogen's locale-aware formatting only when a provider is mounted AND we
    // have a currencyCode to feed useMoney. Otherwise keep the legacy string path.
    const useHydrogen = shopifyAvailable && !!currencyCode;
    const fmt = (v) => formatNum(v, currency, currencyPosition, priceDecimals);
    // Renders a single price value via the chosen path. Conditional RENDERING of the
    // hydrogen wrapper is fine — its useMoney hook is always called once the wrapper
    // is mounted, so the Rules of Hooks are respected.
    const renderPrice = (value, spanClassName) => useHydrogen ? (React.createElement(HydrogenMoneyPrice, { amount: value, currencyCode: currencyCode, className: spanClassName })) : (React.createElement("span", { className: spanClassName }, fmt(value)));
    // Price range mode
    if (priceRange) {
        return (React.createElement("span", { className: clsx("seekora-price-display", "seekora-price-range", className), style: style },
            renderPrice(priceRange.min),
            " \u2013 ",
            renderPrice(priceRange.max)));
    }
    if (price == null)
        return null;
    const hasCompare = comparePrice != null && comparePrice > price;
    const discount = hasCompare
        ? Math.round(((comparePrice - price) / comparePrice) * 100)
        : 0;
    return (React.createElement("span", { className: clsx("seekora-price-display", className), style: style },
        renderPrice(price, "seekora-price-current"),
        hasCompare && renderPrice(comparePrice, "seekora-price-compare"),
        hasCompare && showDiscount && discount > 0 && (React.createElement("span", { className: "seekora-price-discount" },
            "-",
            discount,
            "%"))));
}
