"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Badge = void 0;
const react_1 = __importDefault(require("react"));
const icons_1 = require("../../icons");
const hooks_1 = require("../../hooks");
const Text_1 = require("../Text");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const COLORGUARD = [
    'default',
    'inverted',
    'neutral',
    'informative',
    'positive',
    'warning',
    'negative',
    'brand',
];
const CopyBadgeInner = ({ copyValue, icon, onClick, ...rest }) => {
    const valueToCopy = copyValue ??
        (typeof rest.children === 'string' || typeof rest.children === 'number'
            ? rest.children
            : '');
    const [copy, copyClick] = (0, hooks_1.useCopyToClipboard)(valueToCopy);
    return (react_1.default.createElement(BadgeInner, { onClick: (e) => {
            e.preventDefault();
            e.stopPropagation();
            copyClick();
            if (onClick) {
                onClick(e);
            }
        }, icon: copy ? react_1.default.createElement(icons_1.IconCheckCircle, null) : icon, ...rest }));
};
const BadgeInner = ({ icon, style, onClick, light, children, afterIcon, color: colorProp, autoColor, }) => {
    const { theme } = (0, hooks_1.useTheme)();
    if (!colorProp) {
        if (autoColor) {
            colorProp = (0, varsUtilities_1.colorHash)('nonSemanticBackground', children);
        }
        else {
            colorProp = 'neutral';
        }
    }
    const color = colorProp === 'white'
        ? theme === 'dark'
            ? 'inverted'
            : 'default'
        : colorProp;
    const contentColor = light
        ? color === 'neutral'
            ? 'default'
            : color
        : COLORGUARD.includes(color)
            ? color === 'warning' || color === 'default'
                ? 'default'
                : 'inverted'
            : color === 'orange'
                ? 'grey'
                : 'white';
    return (react_1.default.createElement(inlines_1.styled.div, { onClick: onClick, style: {
            flexShrink: 0,
            height: 24,
            whiteSpace: 'nowrap',
            minWidth: 'fit-content',
            borderRadius: '24px',
            cursor: onClick ? 'pointer' : null,
            padding: !children ? '0px 0px' : '0px 8px',
            width: children ? 'fit-content' : 24,
            maxWidth: '100%',
            display: 'flex',
            color: (0, varsUtilities_1.color)(COLORGUARD.includes(color) ? 'content' : 'nonSemanticContent', contentColor, 'primary'),
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
            backgroundColor: (0, varsUtilities_1.color)(COLORGUARD.includes(color) ? 'background' : 'nonSemanticBackground', color, light ? 'muted' : 'strong'),
            ...style,
        } },
        icon && (react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                marginRight: children ? 4 : 0,
                width: 16,
                height: 16,
                maxWidth: '100%',
                maxHeight: '100%',
                alignItems: 'center',
                justifyContent: 'center',
                '& svg': {
                    width: children ? '14px' : '16px',
                    height: children ? '14px' : '16px',
                },
            } }, icon)),
        react_1.default.createElement(Text_1.Text, { size: 14, selectable: "none", style: {
                color: 'inherit',
            } }, children),
        afterIcon && (react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                marginLeft: children ? 8 : 0,
                width: 16,
                height: 16,
                maxWidth: '100%',
                maxHeight: '100%',
                alignItems: 'center',
                justifyContent: 'center',
                '& svg': {
                    width: children ? '14px' : '16px',
                    height: children ? '14px' : '16px',
                },
            } }, afterIcon))));
};
const Badge = (props) => {
    if (props.copy) {
        return react_1.default.createElement(CopyBadgeInner, { ...props });
    }
    else {
        return react_1.default.createElement(BadgeInner, { ...props });
    }
};
exports.Badge = Badge;
//# sourceMappingURL=index.js.map