import { QuestionCircleOutlined } from "@ant-design/icons";
import { ConfigProvider, Tooltip } from "antd";
import classNames from "classnames";
import React, { useContext } from "react";
import { useStyle } from "./style";
import { formatNumber } from "./utils";
var ChartStatistic = function(param) {
    var title = param.title, tooltip = param.tooltip, value = param.value, precision = param.precision, _param_groupSeparator = param.groupSeparator, groupSeparator = _param_groupSeparator === void 0 ? ',' : _param_groupSeparator, _param_prefix = param.prefix, prefix = _param_prefix === void 0 ? '' : _param_prefix, _param_suffix = param.suffix, suffix = _param_suffix === void 0 ? '' : _param_suffix, formatter = param.formatter, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, _param_size = param.size, size = _param_size === void 0 ? 'default' : _param_size, _param_block = param.block, block = _param_block === void 0 ? false : _param_block, extra = param.extra;
    var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
    var prefixCls = getPrefixCls('chart-statistic');
    var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
    // 渲染数值
    var renderValue = function() {
        // 如果提供了自定义格式化函数，优先使用
        if (formatter) {
            return formatter(value);
        }
        // 使用内置格式化逻辑
        var formatOptions = {
            precision: precision,
            groupSeparator: groupSeparator
        };
        return formatNumber(value, formatOptions);
    };
    // 渲染标题和问号图标
    var renderHeader = function() {
        if (!title && !extra) return null;
        var titleElement = title ? /*#__PURE__*/ React.createElement("span", {
            className: classNames("".concat(prefixCls, "-title"), hashId)
        }, title) : null;
        var questionIcon = tooltip ? /*#__PURE__*/ React.createElement(Tooltip, {
            mouseEnterDelay: 0.3,
            title: tooltip,
            placement: "top"
        }, /*#__PURE__*/ React.createElement(QuestionCircleOutlined, {
            className: classNames("".concat(prefixCls, "-question-icon"), hashId)
        })) : null;
        var extraElement = extra ? /*#__PURE__*/ React.createElement("div", null, extra) : null;
        return /*#__PURE__*/ React.createElement("div", {
            className: classNames("".concat(prefixCls, "-header"), hashId)
        }, /*#__PURE__*/ React.createElement("div", {
            className: classNames("".concat(prefixCls, "-header-left"), hashId)
        }, titleElement, questionIcon), extraElement);
    };
    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
        className: classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), size !== 'default' && "".concat(prefixCls, "-").concat(size), block && "".concat(prefixCls, "-block"), hashId, className)
    }, renderHeader(), /*#__PURE__*/ React.createElement("div", {
        className: classNames("".concat(prefixCls, "-value"), hashId)
    }, prefix && /*#__PURE__*/ React.createElement("span", {
        className: classNames("".concat(prefixCls, "-value-prefix"), hashId)
    }, prefix), renderValue(), suffix && /*#__PURE__*/ React.createElement("span", {
        className: classNames("".concat(prefixCls, "-value-suffix"), hashId)
    }, suffix))));
};
export default ChartStatistic;
