"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SingleMetric = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const pretty_number_1 = require("@based/pretty-number");
const varsUtilities_1 = require("../../varsUtilities");
const genPath_1 = require("../Linegraph/genPath");
const utils_1 = require("../Linegraph/utils");
const SingleMetric = ({ label, valueFormat = 'number-short', data: dataInput = [{ x: 0, y: 0 }], style, color = 'violet', value, }) => {
    const data = (0, utils_1.processData)({ dataInput });
    let width = 100;
    let height = 52;
    const { paths } = (0, genPath_1.genPaths)({
        data: data,
        width: width,
        height: height,
    });
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            padding: '14px 24px 10px 20px',
            border: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
            borderRadius: 8,
            backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'strong'),
            display: 'flex',
            alignItems: 'center',
            maxWidth: 282,
            justifyContent: 'space-between',
            gap: 16,
            ...style,
        } },
        react_1.default.createElement(inlines_1.styled.div, null,
            react_1.default.createElement(Text_1.Text, { size: 12, light: true, truncate: true }, label),
            react_1.default.createElement(Text_1.Text, { size: 24, weight: "strong" }, value
                ? (0, pretty_number_1.prettyNumber)(value, valueFormat)
                : // @ts-ignore
                    dataInput[dataInput.length - 1].y
                        ? // @ts-ignore
                            (0, pretty_number_1.prettyNumber)(dataInput[dataInput.length - 1].y, valueFormat)
                        : 0)),
        react_1.default.createElement(inlines_1.styled.div, { style: {
                width: 100,
                height: 56,
                '& svg': {
                    '& path': {
                        stroke: `${(0, varsUtilities_1.color)('nonSemanticBackground', color, 'strong')}  !important`,
                    },
                },
            } },
            react_1.default.createElement("svg", { viewBox: `0 0 ${width} ${height}`, width: width, height: height }, paths))));
};
exports.SingleMetric = SingleMetric;
//# sourceMappingURL=index.js.map