import useStore_default from "../../hooks/useStore.js";
import Selector from "../../../../pro/Selector/index.js";
import React from "react";
import { locales } from "@pisell/utils";
import "./index.less";
//#region src/plus/skuOptionsSelection/components/VariantCard/index.tsx
const VariantCard = (props) => {
	var _props$dataSource, _props$dataSource2;
	const { dataSource, actions } = props || {};
	const symbol = useStore_default((s) => s.symbol);
	const skuCardConfig = useStore_default((s) => s.skuCardConfig);
	const isVariantPriceVisible = (skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.variantPriceVisible) === true;
	const priceConfig = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.price;
	const priceText = formatPriceText({
		symbol,
		price: dataSource === null || dataSource === void 0 ? void 0 : dataSource.price
	});
	const handleClick = (e) => {
		e.stopPropagation();
		if (dataSource === null || dataSource === void 0 ? void 0 : dataSource.disabled) return;
		if (dataSource === null || dataSource === void 0 ? void 0 : dataSource.selected) actions.update(dataSource._key, { quantity: 0 });
		else actions.update(dataSource._key, {
			quantity: 1,
			data: dataSource._original
		});
	};
	return /* @__PURE__ */ React.createElement(Selector.Item, props || {}, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-sku-options-selection-variant-card",
		onClick: handleClick
	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-sku-options-selection-variant-card__title" }, ((_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.title) || "", ((_props$dataSource2 = props.dataSource) === null || _props$dataSource2 === void 0 || (_props$dataSource2 = _props$dataSource2._extra) === null || _props$dataSource2 === void 0 ? void 0 : _props$dataSource2.hasStock) === false ? ` (${locales.getText("pisell2.skuOptionsSelection.variantItemCard.soldOut")})` : null), isVariantPriceVisible && (priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.visible) !== false && !!priceText ? /* @__PURE__ */ React.createElement("div", {
		className: "pisell-sku-options-selection-variant-card__price",
		style: {
			fontSize: priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.fontSize,
			fontWeight: priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.fontWeight,
			color: priceConfig === null || priceConfig === void 0 ? void 0 : priceConfig.color
		}
	}, locales.getText("pisell2.skuOptionsSelection.variantItemCard.price"), ":", priceText) : null));
};
function formatPriceText(params) {
	const symbol = params.symbol || "$";
	const price = Number(params.price);
	if (!params.price && params.price !== 0) return "";
	if (Number.isNaN(price)) return "";
	return `${symbol}${price.toFixed(2)}`;
}
//#endregion
export { VariantCard as default };
