"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressionPreview = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const AdaptableContext_1 = require("../../View/AdaptableContext");
const ExpressionPreview = (props) => {
    const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
    const displayColumnFriendlyNames = adaptableApi.optionsApi.getExpressionOptions()?.displayColumnFriendlyNamesForExpressions;
    if (!displayColumnFriendlyNames) {
        return React.createElement(React.Fragment, null, adaptableApi.expressionApi.getAdaptableQueryExpression(props.query));
    }
    const expressionWithFriendlyNames = adaptableApi.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
    // '[Column Name] > 2' => ['[Column Name]', '>', '2']
    // not the prettiest
    const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
    return (
        /**
         * The etra wrapper is neede because the tag has display inline-flex and makes the content inside <i> to be displayed on
         * multiple lines when the expression is too long.
         *
         * The div allows the text to flow normally.
         */
        (React.createElement("div", null, strWithMarkedGroupes.map((part, index) => {
            const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
            return React.createElement(React.Fragment, { key: index }, partEl);
        })))
    );
};
exports.ExpressionPreview = ExpressionPreview;
