"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Counter = void 0;
const react_1 = __importDefault(require("react"));
const utils_1 = require("../../utils");
const hooks_1 = require("../../hooks");
const varsUtilities_1 = require("../../varsUtilities");
const components_1 = require("../../components");
const Styled_1 = require("../Styled");
const inlines_1 = require("inlines");
const pretty_number_1 = require("@based/pretty-number");
const Tooltip_1 = require("../Tooltip");
const Counter = ({ color: colorProp = 'default', children, onClick, style, light, label, icon, valueFormat = 'number-round-0', }) => {
    const { theme } = (0, hooks_1.useTheme)();
    const color = colorProp === 'white'
        ? theme === 'dark'
            ? 'inverted'
            : 'default'
        : colorProp;
    const contentColor = light
        ? color === 'neutral'
            ? 'default'
            : color
        : (0, utils_1.isSemanticColor)(color)
            ? color === 'warning'
                ? 'default'
                : 'inverted'
            : color === 'orange'
                ? 'grey'
                : 'white';
    const center = (react_1.default.createElement(Styled_1.Center, { onClick: onClick, style: {
            border: color === 'default' ? '1px solid' : undefined,
            borderColor: (0, varsUtilities_1.color)('nonSemanticBorder', 'grey', light ? 'subtle' : 'strong'),
            backgroundColor: (0, varsUtilities_1.color)((0, utils_1.isSemanticColor)(color) ? 'background' : 'nonSemanticBackground', color, light ? 'muted' : 'strong'),
            color: color === 'default'
                ? (0, varsUtilities_1.color)('content', 'default', 'primary')
                : (0, varsUtilities_1.color)((0, utils_1.isSemanticColor)(color) ? 'content' : 'nonSemanticContent', contentColor, 'primary'),
            borderRadius: '16px',
            minWidth: '24px',
            width: 'fit-content',
            padding: '2px 6px',
            maxHeight: '24px',
            height: '24px',
            boxSizing: 'border-box',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            ...style,
        } },
        icon && (react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                marginLeft: 2,
                marginRight: children !== undefined ? 6 : 0,
                width: 12,
                height: 12,
                maxWidth: '100%',
                maxHeight: '100%',
                alignItems: 'center',
                justifyContent: 'center',
                '& svg': {
                    width: '12px',
                    heigth: '12px',
                },
            } }, icon)),
        react_1.default.createElement(components_1.Text, { selectable: "none", style: { color: 'inherit' }, weight: "strong", size: 12 }, typeof children === 'number'
            ? (0, pretty_number_1.prettyNumber)(Number(children), valueFormat)
            : '')));
    return label ? react_1.default.createElement(Tooltip_1.Tooltip, { text: label }, center) : center;
};
exports.Counter = Counter;
//# sourceMappingURL=index.js.map