"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PercentBarColumnComparisonPreview = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const AdaptableContext_1 = require("../../../../AdaptableContext");
const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
const PercentBarColumnComparisonPreview = (props) => {
    const { api } = (0, AdaptableContext_1.useAdaptable)();
    const columnComparison = props.percentBarStyle.ColumnComparison;
    return (React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 },
        React.createElement(rebass_1.Box, { flexBasis: 120, mr: 3 },
            isNaN(Number(columnComparison.MinValue))
                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
                : columnComparison.MinValue,
            ' ',
            "to",
            ' ',
            isNaN(Number(columnComparison.MaxValue))
                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
                : columnComparison.MaxValue,
            ' '),
        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
};
exports.PercentBarColumnComparisonPreview = PercentBarColumnComparisonPreview;
