import * as React from 'react';
import { useAdaptable } from '../../../../AdaptableContext';
import { PercentBarStylePreview } from './PercentBarStylePreview';
import { Box, Flex } from '../../../../../components/Flex';
export const PercentBarColumnComparisonPreview = (props) => {
    const { api } = useAdaptable();
    const columnComparison = props.percentBarStyle.ColumnComparison;
    return (React.createElement(Flex, { alignItems: "center", className: "twa:mr-3" },
        React.createElement(Box, { className: "twa:basis-[120px] twa: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, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
};
