"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VerticalBar = 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 VerticalBar = ({ valueFormat, label, value, percentage, color, barWidth, spacing = 4, legend, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: { marginRight: spacing, textAlign: 'center' } },
        react_1.default.createElement(inlines_1.styled.div, { style: {
                height: '100%',
                minHeight: 278,
                display: 'flex',
                flexFlow: 'wrap-reverse',
                marginBottom: 8,
            } },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    backgroundColor: color
                        ? (0, varsUtilities_1.color)('nonSemanticBackground', color || 'magenta', 'muted')
                        : (0, varsUtilities_1.color)('nonSemanticBackground', (0, varsUtilities_1.colorHash)('nonSemanticBackground', label), legend ? 'strong' : 'muted'),
                    borderRadius: 3,
                    height: `${percentage.toFixed()}%`,
                    padding: '4px 8px',
                    position: 'relative',
                    whiteSpace: 'nowrap',
                    width: legend ? barWidth : 32,
                    // display: 'flex',
                    // alignItems: 'end',
                    // justifyContent: 'center',
                } },
                react_1.default.createElement(Text_1.Text, { selectable: "none", weight: "medium", style: {
                        bottom: 26,
                        left: 0,
                        right: 0,
                        position: 'absolute',
                        transform: 'rotate(-90deg) ',
                    } }, !legend && label))),
        !legend && (react_1.default.createElement(Text_1.Text, { selectable: "none", weight: "medium" }, valueFormat
            ? (0, pretty_number_1.prettyNumber)(value, valueFormat)
            : percentage.toFixed(1) + '%'))));
};
exports.VerticalBar = VerticalBar;
//# sourceMappingURL=VerticalBar.js.map