"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalBar = void 0;
const react_1 = __importDefault(require("react"));
const Text_1 = require("../Text");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const pretty_number_1 = require("@based/pretty-number");
const HorizontalBar = ({ valueFormat, label, value, percentage, color, barWidth, legend, spacing = 4, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', marginBottom: spacing, alignItems: 'center' } },
        react_1.default.createElement(inlines_1.styled.div, { style: { width: '100%' } },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    borderRadius: 3,
                    backgroundColor: color
                        ? (0, varsUtilities_1.color)('nonSemanticBackground', color || 'magenta', 'muted')
                        : (0, varsUtilities_1.color)('nonSemanticBackground', (0, varsUtilities_1.colorHash)('nonSemanticBackground', label), legend ? 'strong' : 'muted'),
                    padding: '4px 8px',
                    whiteSpace: 'nowrap',
                    display: 'flex',
                    alignItems: 'center',
                    width: `${percentage.toFixed()}%`,
                    height: barWidth ? barWidth : 'auto',
                } },
                react_1.default.createElement(Text_1.Text, { selectable: "none", weight: "medium" }, !legend && label))),
        react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                justifyContent: 'flex-end',
                marginLeft: 26,
                whiteSpace: 'nowrap',
                width: 28,
            } },
            react_1.default.createElement(Text_1.Text, { selectable: "none", weight: "medium" }, valueFormat
                ? (0, pretty_number_1.prettyNumber)(value, valueFormat)
                : percentage.toFixed(1) + '%'))));
};
exports.HorizontalBar = HorizontalBar;
//# sourceMappingURL=HorizontalBar.js.map