const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index = require("../pisellCard/index.js");
const require_MetricValue = require("./components/MetricValue.js");
const require_MetricTitle = require("./components/MetricTitle.js");
const require_formatMetricValue = require("./utils/formatMetricValue.js");
const require_MetricComparison = require("./components/MetricComparison.js");
let react = require("react");
react = require_runtime.__toESM(react);
require("./PisellMetricCard.less");
//#region src/components/pisellMetricCard/PisellMetricCard.tsx
/**
* PisellMetricCard 指标卡片组件
* 
* 用于展示单一核心指标的专业卡片组件
* 支持标题、数值、环比、趋势箭头、标签等信息展示
* 
* @example 基础用法
* ```tsx
* <PisellMetricCard
*   title="Total Sales"
*   value={1580}
* />
* ```
* 
* @example 使用对象配置
* ```tsx
* <PisellMetricCard
*   title="Revenue"
*   value={1580}
*   format={{ 
*     showCurrencySymbol: true, 
*     currencySymbol: '$',
*     useGrouping: true 
*   }}
*   comparison={{ 
*     value: 120 
*   }}
* />
* ```
*/
const PisellMetricCard = (props) => {
	const { title, subtitle, value, tag, tooltip, format, comparison, styleConfig, showSubtitle = false, showTag = false, showTooltip = false, loading = false, hoverable = true, className, style, onClick } = props;
	const formatConfig = (0, react.useMemo)(() => {
		var _format$precision, _format$useGrouping, _format$showCurrencyS, _format$currencySymbo, _format$hideDecimalFo;
		return {
			precision: (_format$precision = format === null || format === void 0 ? void 0 : format.precision) !== null && _format$precision !== void 0 ? _format$precision : 0,
			useGrouping: (_format$useGrouping = format === null || format === void 0 ? void 0 : format.useGrouping) !== null && _format$useGrouping !== void 0 ? _format$useGrouping : false,
			showCurrencySymbol: (_format$showCurrencyS = format === null || format === void 0 ? void 0 : format.showCurrencySymbol) !== null && _format$showCurrencyS !== void 0 ? _format$showCurrencyS : false,
			currencySymbol: (_format$currencySymbo = format === null || format === void 0 ? void 0 : format.currencySymbol) !== null && _format$currencySymbo !== void 0 ? _format$currencySymbo : "",
			formatter: format === null || format === void 0 ? void 0 : format.formatter,
			hideDecimalForWholeNumbers: (_format$hideDecimalFo = format === null || format === void 0 ? void 0 : format.hideDecimalForWholeNumbers) !== null && _format$hideDecimalFo !== void 0 ? _format$hideDecimalFo : true
		};
	}, [format]);
	const cardStyle = (0, react.useMemo)(() => {
		var _styleConfig$card$bor, _styleConfig$card, _styleConfig$card$bor2, _styleConfig$card2, _styleConfig$card$pad, _styleConfig$card3, _styleConfig$card$sha, _styleConfig$card4, _styleConfig$card$bac, _styleConfig$card5, _styleConfig$card$wid, _styleConfig$card6;
		return {
			bordered: (_styleConfig$card$bor = styleConfig === null || styleConfig === void 0 || (_styleConfig$card = styleConfig.card) === null || _styleConfig$card === void 0 ? void 0 : _styleConfig$card.bordered) !== null && _styleConfig$card$bor !== void 0 ? _styleConfig$card$bor : true,
			borderRadius: (_styleConfig$card$bor2 = styleConfig === null || styleConfig === void 0 || (_styleConfig$card2 = styleConfig.card) === null || _styleConfig$card2 === void 0 ? void 0 : _styleConfig$card2.borderRadius) !== null && _styleConfig$card$bor2 !== void 0 ? _styleConfig$card$bor2 : 12,
			padding: (_styleConfig$card$pad = styleConfig === null || styleConfig === void 0 || (_styleConfig$card3 = styleConfig.card) === null || _styleConfig$card3 === void 0 ? void 0 : _styleConfig$card3.padding) !== null && _styleConfig$card$pad !== void 0 ? _styleConfig$card$pad : 16,
			shadow: (_styleConfig$card$sha = styleConfig === null || styleConfig === void 0 || (_styleConfig$card4 = styleConfig.card) === null || _styleConfig$card4 === void 0 ? void 0 : _styleConfig$card4.shadow) !== null && _styleConfig$card$sha !== void 0 ? _styleConfig$card$sha : true,
			background: (_styleConfig$card$bac = styleConfig === null || styleConfig === void 0 || (_styleConfig$card5 = styleConfig.card) === null || _styleConfig$card5 === void 0 ? void 0 : _styleConfig$card5.background) !== null && _styleConfig$card$bac !== void 0 ? _styleConfig$card$bac : "#ffffff",
			width: (_styleConfig$card$wid = styleConfig === null || styleConfig === void 0 || (_styleConfig$card6 = styleConfig.card) === null || _styleConfig$card6 === void 0 ? void 0 : _styleConfig$card6.width) !== null && _styleConfig$card$wid !== void 0 ? _styleConfig$card$wid : "auto"
		};
	}, [styleConfig]);
	const titleStyle = (0, react.useMemo)(() => {
		var _styleConfig$title$si, _styleConfig$title, _styleConfig$title$we, _styleConfig$title2, _styleConfig$title$co, _styleConfig$title3;
		return {
			size: (_styleConfig$title$si = styleConfig === null || styleConfig === void 0 || (_styleConfig$title = styleConfig.title) === null || _styleConfig$title === void 0 ? void 0 : _styleConfig$title.size) !== null && _styleConfig$title$si !== void 0 ? _styleConfig$title$si : 14,
			weight: (_styleConfig$title$we = styleConfig === null || styleConfig === void 0 || (_styleConfig$title2 = styleConfig.title) === null || _styleConfig$title2 === void 0 ? void 0 : _styleConfig$title2.weight) !== null && _styleConfig$title$we !== void 0 ? _styleConfig$title$we : 400,
			color: (_styleConfig$title$co = styleConfig === null || styleConfig === void 0 || (_styleConfig$title3 = styleConfig.title) === null || _styleConfig$title3 === void 0 ? void 0 : _styleConfig$title3.color) !== null && _styleConfig$title$co !== void 0 ? _styleConfig$title$co : "rgba(0, 0, 0, 0.45)"
		};
	}, [styleConfig]);
	const valueStyle = (0, react.useMemo)(() => {
		var _styleConfig$value$si, _styleConfig$value, _styleConfig$value$we, _styleConfig$value2, _styleConfig$value$co, _styleConfig$value3;
		return {
			size: (_styleConfig$value$si = styleConfig === null || styleConfig === void 0 || (_styleConfig$value = styleConfig.value) === null || _styleConfig$value === void 0 ? void 0 : _styleConfig$value.size) !== null && _styleConfig$value$si !== void 0 ? _styleConfig$value$si : 30,
			weight: (_styleConfig$value$we = styleConfig === null || styleConfig === void 0 || (_styleConfig$value2 = styleConfig.value) === null || _styleConfig$value2 === void 0 ? void 0 : _styleConfig$value2.weight) !== null && _styleConfig$value$we !== void 0 ? _styleConfig$value$we : 600,
			color: (_styleConfig$value$co = styleConfig === null || styleConfig === void 0 || (_styleConfig$value3 = styleConfig.value) === null || _styleConfig$value3 === void 0 ? void 0 : _styleConfig$value3.color) !== null && _styleConfig$value$co !== void 0 ? _styleConfig$value$co : "rgba(0, 0, 0, 0.85)"
		};
	}, [styleConfig]);
	const formattedValue = (0, react.useMemo)(() => {
		return require_formatMetricValue.formatMetricValue(value, formatConfig);
	}, [value, formatConfig]);
	const comparisonConfig = (0, react.useMemo)(() => {
		var _comparison$text, _comparison$showTrend, _comparison$positiveC, _comparison$negativeC, _comparison$size;
		if (!(comparison === null || comparison === void 0 ? void 0 : comparison.value)) return null;
		return {
			value: comparison.value,
			text: (_comparison$text = comparison.text) !== null && _comparison$text !== void 0 ? _comparison$text : "v.s. pre",
			showTrendIcon: (_comparison$showTrend = comparison.showTrendIcon) !== null && _comparison$showTrend !== void 0 ? _comparison$showTrend : true,
			positiveColor: (_comparison$positiveC = comparison.positiveColor) !== null && _comparison$positiveC !== void 0 ? _comparison$positiveC : "#52c41a",
			negativeColor: (_comparison$negativeC = comparison.negativeColor) !== null && _comparison$negativeC !== void 0 ? _comparison$negativeC : "#ff4d4f",
			size: (_comparison$size = comparison.size) !== null && _comparison$size !== void 0 ? _comparison$size : 14
		};
	}, [comparison]);
	return /* @__PURE__ */ react.default.createElement(require_index.default, {
		bordered: cardStyle.bordered,
		borderRadius: cardStyle.borderRadius,
		padding: cardStyle.padding,
		loading,
		isClickable: !!onClick,
		onClick,
		style: require_objectSpread2._objectSpread2({
			width: typeof cardStyle.width === "number" ? `${cardStyle.width}px` : cardStyle.width,
			background: cardStyle.background,
			boxShadow: typeof cardStyle.shadow === "string" ? cardStyle.shadow : cardStyle.shadow ? "0px 1px 2px 0px rgba(16, 24, 40, 0.05)" : "none"
		}, style),
		className: `pisell-metric-card ${className || ""}`
	}, /* @__PURE__ */ react.default.createElement(require_MetricTitle.default, {
		title,
		subtitle: showSubtitle ? subtitle : void 0,
		tooltip: showTooltip ? tooltip : void 0,
		titleSize: titleStyle.size,
		titleWeight: titleStyle.weight,
		titleColor: titleStyle.color
	}), /* @__PURE__ */ react.default.createElement(require_MetricValue.default, {
		value: formattedValue,
		valueSize: valueStyle.size,
		valueWeight: valueStyle.weight,
		valueColor: valueStyle.color
	}), comparisonConfig && /* @__PURE__ */ react.default.createElement(require_MetricComparison.default, {
		comparison: comparisonConfig.value,
		comparisonText: comparisonConfig.text,
		showTrendIcon: comparisonConfig.showTrendIcon,
		positiveColor: comparisonConfig.positiveColor,
		negativeColor: comparisonConfig.negativeColor,
		comparisonSize: comparisonConfig.size,
		precision: formatConfig.precision,
		showCurrencySymbol: formatConfig.showCurrencySymbol,
		currencySymbol: formatConfig.currencySymbol
	}), showTag && tag && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-metric-card-tag" }, tag));
};
//#endregion
exports.default = PisellMetricCard;
