import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from "react";
import { cn } from "../utils/css";
import { Numeral, Text } from "../text";
import { StatisticStyleContext } from "./defaultStaticStyle";
import { Tooltip } from "../tooltip";
const alignClasses = {
    left: "orderly-text-left",
    right: "orderly-text-right",
    center: "orderly-text-center"
};
const coloringClasses = {
    lose: "orderly-text-trade-loss",
    profit: "orderly-text-trade-profit",
    neutral: "orderly-text-base-contrast/50"
};
export const Statistic = (props)=>{
    const { align = "left", rule: rule, asChild } = props;
    const { labelClassName, valueClassName } = useContext(StatisticStyleContext);
    const labelElement = useMemo(()=>{
        if (typeof props.label === "string") {
            return props.label;
        }
        return props.label;
    }, [
        props.label
    ]);
    // lose, profit, neutral
    const colorClassName = useMemo(()=>{
        if (!props.coloring) return "";
        if (typeof props.value !== "number" && typeof props.value !== "string") return "";
        // if (props.value === 0) return coloringClasses.neutral;
        const num = Number(props.value);
        if (Number.isNaN(num)) {
            // console.warn(`if coloring, value is need number: ${props.value}`);
            return "";
        }
        if (num === 0) return coloringClasses.neutral;
        if (num < 0) return coloringClasses.lose;
        // const firstChar = String(props.value).charAt(0);
        // if (firstChar === "-") return coloringClasses.lose;
        return coloringClasses.profit;
    }, [
        props.coloring,
        props.value
    ]);
    // ---------- create value element ----------
    const valueElement = useMemo(()=>{
        if (typeof props.value === "string" || typeof props.value === "number") {
            if (rule === "price" || rule === "percentages") {
                return /*#__PURE__*/ _jsx(Numeral, {
                    rule: rule,
                    precision: props.precision,
                    visible: props.visible,
                    children: props.value
                });
            }
            // "date" | "address" | "text" | "symbol"
            if (rule === "date" || rule === "address" || rule === "text" || rule === "symbol" || rule === "status") {
                return /*#__PURE__*/ _jsx(Text, {
                    rule: rule,
                    children: props.value
                });
            }
            return /*#__PURE__*/ _jsx("span", {
                children: props.value
            });
        }
        return props.value ?? "--";
    }, [
        props.value,
        rule,
        props.precision,
        props.visible
    ]);
    let label;
    if (typeof props.hint === "undefined") {
        label = /*#__PURE__*/ _jsx("div", {
            className: cn(labelClassName, props.labelClassName),
            children: labelElement
        });
    } else {
        label = /*#__PURE__*/ _jsx(Tooltip, {
            content: props.hint,
            className: "orderly-max-w-[200px]",
            children: /*#__PURE__*/ _jsx("div", {
                className: cn(labelClassName, props.labelClassName),
                children: labelElement
            })
        });
    }
    return /*#__PURE__*/ _jsxs("div", {
        className: cn(alignClasses[align], props.className, props.hint && "orderly-cursor-pointer hover:orderly-text-base-contrast"),
        children: [
            label,
            /*#__PURE__*/ _jsx("div", {
                className: cn(valueClassName, props.valueClassName, colorClassName),
                children: valueElement
            })
        ]
    });
};

//# sourceMappingURL=statistic.js.map