"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Thumbnail = void 0;
const react_1 = __importDefault(require("react"));
const Text_1 = require("../Text");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const Styled_1 = require("../Styled");
const COLORGUARD = [
    'default',
    'inverted',
    'neutral',
    'informative',
    'positive',
    'warning',
    'negative',
    'brand',
];
const CounterBadge = (0, inlines_1.styled)('div', {
    width: 20,
    height: 20,
    borderRadius: 10,
    border: (0, varsUtilities_1.border)(1),
    backgroundColor: (0, varsUtilities_1.color)('background', 'default'),
    position: 'absolute',
    right: -10,
    top: -10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: (0, varsUtilities_1.boxShadow)('small'),
});
const Thumbnail = ({ size = 'medium', src, color, icon, style, label, outline, onClick, light, counter, autoColor, }) => {
    if (autoColor && !color) {
        color = (0, varsUtilities_1.colorHash)('nonSemanticBackground', label ?? src);
    }
    else if (!color) {
        color = 'brand';
    }
    const calcedSize = size === 'small' ? 40 : size === 'large' ? 80 : 60;
    const contentColor = light
        ? color === 'neutral'
            ? 'default'
            : color
        : COLORGUARD.includes(color)
            ? color === 'warning' || color === 'default'
                ? 'default'
                : 'inverted'
            : color === 'orange'
                ? 'grey'
                : 'white';
    const labelNode = label ? (react_1.default.createElement(Text_1.Text, { weight: size === 'small' ? 'strong' : 'medium', color: "inherit", selectable: "none", size: size === 'small' ? 14 : size === 'large' ? 32 : 24 }, label.length > 1
        ? label[0].toUpperCase() + label[1].toUpperCase()
        : label)) : null;
    const backgroundColor = (0, varsUtilities_1.color)(COLORGUARD.includes(color) ? 'background' : 'nonSemanticBackground', color, light ? 'muted' : 'strong');
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            backgroundColor,
            borderRadius: size === 'small' ? 6 : 8,
            color: (0, varsUtilities_1.color)(COLORGUARD.includes(color) ? 'content' : 'nonSemanticContent', contentColor, 'primary'),
            border: outline
                ? `1px solid ${(0, varsUtilities_1.color)(COLORGUARD.includes(color)
                    ? 'background'
                    : 'nonSemanticBackground', color, light ? 'strong' : 'muted')}`
                : 'none',
            display: 'flex',
            cursor: onClick ? 'pointer' : 'default',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundImage: src ? `url(${src})` : null,
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            position: 'relative',
            minWidth: calcedSize,
            width: calcedSize,
            height: calcedSize,
            ...style,
        }, onClick: onClick },
        counter && (react_1.default.createElement(CounterBadge, null,
            react_1.default.createElement(Text_1.Text, { selectable: "none", weight: "strong" }, counter))),
        label && src ? (react_1.default.createElement(Styled_1.Center, { style: {
                borderRadius: 8,
                width: '100%',
                height: '100%',
            } }, labelNode)) : label ? (labelNode) : icon ? (icon) : null));
};
exports.Thumbnail = Thumbnail;
//# sourceMappingURL=index.js.map