import useEngineContext from "../../../../hooks/useEngineContext.js";
import useThemeTokens from "../../../../hooks/useThemeTokens.js";
import locales_default from "./locales.js";
import React, { useMemo } from "react";
import { image, locales } from "@pisell/utils";
import { Iconfont } from "@pisell/materials";
import classNames from "classnames";
import "./index.less";
//#region src/pro/Cards/components/SKUCard/index.tsx
const SKUCard = ({ cover, title, subtitle, price, arrow, selected, disabled, onClick, renderRight, skuCardConfig, skuDisabled, theme }) => {
	var _context$appHelper, _skuCardConfig$title, _skuCardConfig$subTit, _skuCardConfig$price, _skuCardConfig$image, _skuCardConfig$disabl, _skuCardConfig$disabl2;
	const { colorPrimary, colorPrimaryBg } = useThemeTokens(theme);
	const context = useEngineContext();
	const language = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get("umi_locale")) || "en";
	locales.init(locales_default, language);
	/**
	* 计算主标题样式
	* 默认全部展示，可换行；如果配置了 lineClamp 则限制行数
	*/
	const titleStyle = useMemo(() => {
		const config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.title;
		const style = {};
		if (disabled) style.color = "#98A2B3";
		else if (config === null || config === void 0 ? void 0 : config.color) style.color = config.color;
		if (config === null || config === void 0 ? void 0 : config.fontSize) style.fontSize = config.fontSize;
		if (config === null || config === void 0 ? void 0 : config.fontWeight) style.fontWeight = config.fontWeight;
		if ((config === null || config === void 0 ? void 0 : config.lineClamp) && (config === null || config === void 0 ? void 0 : config.lineClamp) > 0) {
			style.display = "-webkit-box";
			style.WebkitLineClamp = config.lineClamp;
			style.lineClamp = config.lineClamp;
			style.WebkitBoxOrient = "vertical";
			style.overflow = "hidden";
		}
		return style;
	}, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.title, disabled]);
	/**
	* 计算副标题样式
	* 默认展示两行（CSS 中已设置），如果配置了其他 lineClamp 值则覆盖
	*/
	const subTitleStyle = useMemo(() => {
		const config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.subTitle;
		const style = {};
		if (disabled) style.color = "#98A2B3";
		else if (config === null || config === void 0 ? void 0 : config.color) style.color = config.color;
		if (config === null || config === void 0 ? void 0 : config.fontSize) style.fontSize = config.fontSize;
		if (config === null || config === void 0 ? void 0 : config.fontWeight) style.fontWeight = config.fontWeight;
		if ((config === null || config === void 0 ? void 0 : config.lineClamp) && (config === null || config === void 0 ? void 0 : config.lineClamp) > 0) {
			style.WebkitLineClamp = config.lineClamp;
			style.lineClamp = config.lineClamp;
		}
		return style;
	}, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.subTitle, disabled]);
	/**
	* 计算价格样式
	*/
	const priceStyle = useMemo(() => {
		const config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.price;
		const style = {};
		if (disabled) style.color = "#98A2B3";
		else if (config === null || config === void 0 ? void 0 : config.color) style.color = config.color;
		if (config === null || config === void 0 ? void 0 : config.fontSize) style.fontSize = config.fontSize;
		if (config === null || config === void 0 ? void 0 : config.fontWeight) style.fontWeight = config.fontWeight;
		return style;
	}, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.price, disabled]);
	/**
	* 计算图片样式
	*/
	const imageStyle = useMemo(() => {
		const config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.image;
		const style = {};
		if (config === null || config === void 0 ? void 0 : config.width) style.width = config.width;
		if (config === null || config === void 0 ? void 0 : config.height) style.height = config.height;
		if ((config === null || config === void 0 ? void 0 : config.borderRadius) !== void 0) style.borderRadius = typeof config.borderRadius === "number" ? `${config.borderRadius}px` : config.borderRadius;
		if (config === null || config === void 0 ? void 0 : config.border) style.border = config.border;
		return style;
	}, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.image]);
	/** 计算disabled文本样式 */
	const disabledTextStyle = useMemo(() => {
		const config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.disabledText;
		const style = {};
		if (config === null || config === void 0 ? void 0 : config.color) style.color = config.color;
		if (config === null || config === void 0 ? void 0 : config.fontSize) style.fontSize = config.fontSize;
		if (config === null || config === void 0 ? void 0 : config.fontWeight) style.fontWeight = config.fontWeight;
		return style;
	}, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.disabledText]);
	/** 是否显示主标题 */
	const showTitle = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$title = skuCardConfig.title) === null || _skuCardConfig$title === void 0 ? void 0 : _skuCardConfig$title.visible) !== false;
	/** 是否显示副标题 */
	const showSubTitle = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$subTit = skuCardConfig.subTitle) === null || _skuCardConfig$subTit === void 0 ? void 0 : _skuCardConfig$subTit.visible) !== false;
	/** 是否显示价格 */
	const showPrice = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$price = skuCardConfig.price) === null || _skuCardConfig$price === void 0 ? void 0 : _skuCardConfig$price.visible) !== false;
	/** 是否显示图片 */
	const showImage = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$image = skuCardConfig.image) === null || _skuCardConfig$image === void 0 ? void 0 : _skuCardConfig$image.visible) !== false;
	/** 是否显示disabled文本 */
	const showDisabledText = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$disabl = skuCardConfig.disabledText) === null || _skuCardConfig$disabl === void 0 ? void 0 : _skuCardConfig$disabl.visible) !== false;
	const titleText = useMemo(() => {
		if (!title) return "";
		if (title.length < 2) return title.toUpperCase();
		return title.substring(0, 2).toUpperCase();
	}, [title]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-pro-cards-sku-card", {
			"pisell-pro-cards-sku-card-active": selected,
			"pisell-pro-cards-sku-card-with-image": showImage,
			"pisell-pro-cards-sku-card-no-image": !showImage,
			"pisell-pro-cards-sku-card-disabled": disabled
		}),
		onClick: () => {
			if (disabled) return;
			onClick === null || onClick === void 0 || onClick();
		},
		style: {
			cursor: disabled ? "not-allowed" : "pointer",
			["--color-primary"]: colorPrimary,
			["--color-primary-bg"]: colorPrimaryBg
		}
	}, !!skuDisabled && !!showDisabledText && /* @__PURE__ */ React.createElement("div", { className: "pisell-pro-cards-sku-card-disabled-mask" }, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-pro-cards-sku-card-disabled-text",
		style: disabledTextStyle
	}, (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$disabl2 = skuCardConfig.disabledText) === null || _skuCardConfig$disabl2 === void 0 ? void 0 : _skuCardConfig$disabl2.text) || locales.getText("pisell2.pro.cards.skuCard.disabledText"))), /* @__PURE__ */ React.createElement("div", { className: "pisell-pro-cards-sku-card-left" }, showImage && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-pro-cards-sku-card-image-container",
		style: imageStyle
	}, !!cover ? /* @__PURE__ */ React.createElement("img", {
		src: image.ali(cover, 360),
		alt: title,
		className: "pisell-pro-cards-sku-card-image"
	}) : /* @__PURE__ */ React.createElement("div", { className: "pisell-pro-cards-sku-card-image-default" }, titleText)), /* @__PURE__ */ React.createElement("div", { className: "pisell-pro-cards-sku-card-content" }, showTitle && title && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-pro-cards-sku-card-title",
		style: titleStyle
	}, title), showSubTitle && subtitle && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-pro-cards-sku-card-subtitle",
		style: subTitleStyle
	}, subtitle), showPrice && price && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-pro-cards-sku-card-price",
		style: priceStyle
	}, price))), arrow || renderRight ? /* @__PURE__ */ React.createElement("div", {
		className: "pisell-pro-cards-sku-card-right",
		style: renderRight ? {} : {
			padding: "0 8px",
			alignItems: "center"
		}
	}, renderRight ? typeof renderRight === "function" ? renderRight() : renderRight : /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-chevron-right",
		style: {
			fontSize: "28px",
			color: disabled ? "#f2f2f2" : "#475467"
		}
	})) : null);
};
//#endregion
export { SKUCard as default };
