import React, { useMemo } from 'react';
import TrendIcon from "./TrendIcon";
import { formatMetricValue, calculateTrend } from "../utils";
/**
 * MetricComparison 环比信息组件
 * 
 * 负责渲染环比数值和趋势箭头
 * - 自动根据正负值显示不同颜色
 * - 支持格式化环比数值
 * - 集成趋势箭头组件
 * 
 * @param props 组件属性
 */
var MetricComparison = function MetricComparison(_ref) {
  var comparison = _ref.comparison,
    _ref$comparisonText = _ref.comparisonText,
    comparisonText = _ref$comparisonText === void 0 ? 'v.s. pre' : _ref$comparisonText,
    _ref$showTrendIcon = _ref.showTrendIcon,
    showTrendIcon = _ref$showTrendIcon === void 0 ? true : _ref$showTrendIcon,
    _ref$positiveColor = _ref.positiveColor,
    positiveColor = _ref$positiveColor === void 0 ? '#52c41a' : _ref$positiveColor,
    _ref$negativeColor = _ref.negativeColor,
    negativeColor = _ref$negativeColor === void 0 ? '#ff4d4f' : _ref$negativeColor,
    _ref$comparisonSize = _ref.comparisonSize,
    comparisonSize = _ref$comparisonSize === void 0 ? 14 : _ref$comparisonSize,
    precision = _ref.precision,
    showCurrencySymbol = _ref.showCurrencySymbol,
    currencySymbol = _ref.currencySymbol;
  // 计算趋势
  var trend = useMemo(function () {
    return calculateTrend(comparison);
  }, [comparison]);

  // 格式化环比数值（取绝对值）
  var formattedComparison = useMemo(function () {
    if (comparison === null || comparison === undefined) {
      return null;
    }
    var numComparison = typeof comparison === 'string' ? parseFloat(comparison) : comparison;
    if (isNaN(numComparison)) {
      return null;
    }
    return formatMetricValue(Math.abs(numComparison), {
      precision: precision,
      showCurrencySymbol: showCurrencySymbol,
      currencySymbol: currencySymbol,
      useGrouping: false
    });
  }, [comparison, precision, showCurrencySymbol, currencySymbol]);

  // 如果环比值为空或无法格式化，不渲染
  if (formattedComparison === null || trend === 'neutral') {
    return null;
  }

  // 确定颜色
  var color = trend === 'up' ? positiveColor : negativeColor;

  // 确定符号
  var sign = trend === 'up' ? '+' : '-';
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-metric-card-comparison",
    style: {
      fontSize: typeof comparisonSize === 'number' ? "".concat(comparisonSize, "px") : comparisonSize,
      color: color
    }
  }, /*#__PURE__*/React.createElement("span", null, comparisonText), /*#__PURE__*/React.createElement("span", null, sign, formattedComparison), showTrendIcon && /*#__PURE__*/React.createElement(TrendIcon, {
    trend: trend,
    color: color
  }));
};
export default MetricComparison;