"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressionValueRenderer = exports.VariableElement = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const ExpressionReactContext_1 = require("../Structure/ExpressionReactContext");
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const ValidationError_1 = require("../Utilities/ValidationError");
const TestContext_1 = require("../../CommonUI/Testing/TestContext");
const ExpressionTestResultColorContext_1 = require("../Testing/ExpressionTestResultColorContext");
const core_1 = require("@material-ui/core");
const ObserveMultiState_1 = require("../../CommonUI/StateManagement/ObserveMultiState");
const RegisterExpressionRuleEditor_1 = require("../Utilities/RegisterExpressionRuleEditor");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const SelectedElement = styled_components_1.default.span `
    display: flex;
    align-items: center;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            border: 1px solid #15466B;
            box-sizing: border-box;
            border-radius: 3px;
            background-color: #DCEAF5;
            margin-right: 5px;
            margin-left: 5px;
        `
    : `
            
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 15px;
            color: #272932;
            white-space: pre;
        `}
`;
const SelectedExpression = styled_components_1.default.span `
    display: flex;
    align-items: center;

    position: relative;
    overflow: visible;
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                border: 1px solid #15466B;
                box-sizing: border-box;
                border-radius: 3px;
                background-color: #DCEAF5;
            
                margin-right: -10px;
                margin-left: 0px;
                flex: 1;
            `
    : `
                
                font-style: normal;
                font-weight: 500;
                font-size: 12px;
                line-height: 15px;
                color: #272932;
                white-space: pre;
        `}
`;
const ExpressionValueWrapper = styled_components_1.default.div `
    position: relative;
    overflow: visible;
    display: flex;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            padding-right: 4px;
            padding-left: 4px;
            flex: 1;
        `
    : ``}
`;
const ValueElement = styled_components_1.default.div `
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                border: 2px solid white;
                border-radius: 4px;
                background-color: #D8E4EE;
                color: #4B6080;
                margin-right: 5px;
                margin-left: 5px;
                
                font-style: normal;
                font-weight: 600;
                font-size: 14px;
                line-height: 20px;
                transition: all .3s;
            
                &:hover {
                    border: 2px solid #D8E4EE;
                    border-radius: 5px;
                    background-color: white;
                }
            `
    : `
                
                font-style: normal;
                font-weight: 500;
                font-size: 12px;
                line-height: 15px;
                color: ${props.compactColor?.value || UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR};
                white-space: pre;
            `}
    display: inline-flex;
    align-items: center;
    position: relative;
`;
exports.VariableElement = styled_components_1.default.div `
    display: flex;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT
    ? `
                flex-direction: column;
            `
    : `
                align-items: center;
            `}

    cursor: pointer;
    position: relative;

    > i {
        ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                    font-size: 14px;
                    line-height: 24px;
                    border-bottom: dotted 1px #93A9BF; 
                    display: block;
                    color: #677C95;
                `
    : `
                    font-family: Source Code Pro;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 15px;
                    color: ${props.compactColor?.variable || "rgba(39, 41, 50, 0.6)"};
                    white-space: pre;
                `}
    }

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            padding: 3px 0;
            margin-right: 4px;
            margin-left: 4px;
            &:hover {
                > i {
                    border-bottom: solid 2px #93A9BF; 
                }
            }
        `
    : ``}
`;
const InnerValueDiv = styled_components_1.default.div `
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            padding: 4px 8px;
            display: flex;
        `
    : `
            padding: 0 4px;
        `}
`;
const SubExpressionElement = styled_components_1.default.div `
    position: relative;
    display: flex;
    flex: 1;

    ${(props) => props.isText
    ? `
                flex-direction: column;
            `
    : ``}
`;
const TestValueRender = styled_components_1.default.div `
    text-align: ${(props) => (props.type === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION ? "right" : "left")};
    font-size: 8px;

    line-height: 1;

    white-space: pre;

    ${(props) => (props.color ? `color: ${props.color};` : ``)}
`;
const FullModeTestValueRender = styled_components_1.default.div `
    position: absolute;

    right: ${(props) => (props.type === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION ? "10px" : "0")};
    bottom: -12px;
    font-size: 12px;

    line-height: 1;

    white-space: pre;

    ${(props) => (props.color ? `color: ${props.color};` : ``)}
`;
const TestErrorValueRender = styled_components_1.default.div `
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: solid 1px ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};
    border-radius: 6px;
`;
const MissingElement = styled_components_1.default.span `
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 3px;
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            margin-right: 5px;
            margin-left: 5px;
        `
    : `white-space: pre;`}
`;
const MissingTextDiv = (0, styled_components_1.default)("div") `
    letter-spacing: 0.05em;
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    transition: all 0.3s;
    position: relative;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
            color: #1D6295;
            padding: 4px 12px;
            
            font-style: normal;
            font-weight: bold;
            font-size: 14px;
            line-height: 24px;
            border: 1px solid #1D6295;
            cursor: pointer;

            &:hover {
                background: #1D6295;
                border-color: #fff;
                color: #fff;
            }
        `
    : `
            
            font-size: 12px;
            font-style: italic;
            font-weight: 400;
            line-height: 15px;
            letter-spacing: 0px;
            text-align: left;
            color: ${props.compactColor?.missing || UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR};
            white-space: pre;
        `}
`;
const TextDiv = (0, styled_components_1.default)("div") `
    color: #4b6080;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                padding: 4px 8px;
                
                font-style: normal;
                font-weight: 600;
                font-size: 14px;
                line-height: 20px;
            `
    : `
                white-space: pre;
                
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
                letter-spacing: 0px;
                text-align: left;
                font-style: normal;
                color: rgba(39, 41, 50, 0.3);
                white-space: pre;

            `}
`;
class ExpressionValueRenderer extends react_1.default.Component {
    static contextType = ExpressionReactContext_1.ExpressionReactContext;
    handleSelectExpression(event) {
        if (this.context.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL) {
            event.stopPropagation();
            this.props.el.editContext?.setSelection(this.props.el._id);
        }
    }
    checkPassedInTest(testcontext) {
        if (!testcontext)
            return null;
        let testitem = testcontext.findItem(this.props.el._id);
        if (!testitem)
            return null;
        if (testitem.result === "true")
            return true;
        if (testitem.result === "false")
            return false;
        return null;
    }
    getTestValueColor(testcontext) {
        let result = this.checkPassedInTest(testcontext);
        if (result === null)
            return undefined;
        let color = result ? UIStyleConstants_1.UIStyleConstants.GREEN_COLOR : UIStyleConstants_1.UIStyleConstants.RED_COLOR;
        return color;
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                return ((0, jsx_runtime_1.jsx)(ExpressionValueWrapper, { renderType: this.context.renderType, id: this.props.el._id, children: (0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [this.props.el, this.props.el.editContext], control: () => {
                            let selected = false;
                            if (this.props.el.editContext?.getSelection()) {
                                selected = this.props.el.editContext?.getSelection() === this.props.el._id;
                            }
                            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: 
                                // no need to render for selected elements when compact version
                                selected
                                    ? this.renderSelectedElements(testcontext)
                                    : this.renderUnselectedElements(testcontext) }));
                        } }) }));
            } }));
    }
    renderMissingElement() {
        let text = this.props.el.editContext?.emptyExpressionText ?? this.context.missing.default;
        switch (this.props.el.valueType) {
            case ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION:
                text = this.context.missing.subexpression;
                break;
            case ExpressionValueType_1.ExpressionValueType.VARIABLE:
                text = this.context.missing.variable;
                break;
            case ExpressionValueType_1.ExpressionValueType.VALUE:
                text = this.context.missing.value;
                break;
        }
        return ((0, jsx_runtime_1.jsxs)(MissingTextDiv, { renderType: this.context.renderType, children: [text, this.renderError()] }));
    }
    renderError() {
        return (0, jsx_runtime_1.jsx)(ValidationError_1.ValidationError, { value: this.props.el });
    }
    renderVariableName() {
        return this.props.el.variableName;
    }
    renderValue() {
        if (this.props.el.expectedType.list) {
            if (Array.isArray(this.props.el.value)) {
                return this.props.el.value.join(",");
            }
        }
        else if (this.props.el.expectedType.type === DataTypes_1.DataTypes.BOOLEAN) {
            return this.props.el.value ? "True" : "False";
        }
        else {
            return this.props.el.value;
        }
    }
    renderTestValue(textcontext) {
        if (!textcontext)
            return null;
        let testitem;
        let itemid = this.props.el._id;
        testitem = textcontext.findItem(itemid);
        if (!testitem) {
            return null;
        }
        if (!testitem.isError) {
            return ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Consumer, { children: (testcolor) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.context.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT ? ((0, jsx_runtime_1.jsx)(TestValueRender, { type: this.props.el.valueType, color: testcolor, children: testitem?.result })) : ((0, jsx_runtime_1.jsx)(FullModeTestValueRender, { type: this.props.el.valueType, color: testcolor, children: testitem?.result })) })) }));
        }
        if (this.props.el._id === this.props.el.editContext?.definition?.expressionRoot?._id)
            return null;
        return ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: testitem.result, children: (0, jsx_runtime_1.jsx)(TestErrorValueRender, {}) }));
    }
    renderSelectedElements(testcontext) {
        if (this.props.el.valueType === ExpressionValueType_1.ExpressionValueType.VARIABLE) {
            return ((0, jsx_runtime_1.jsx)(SelectedElement, { renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression, children: this.props.el.variableName ? ((0, jsx_runtime_1.jsxs)(TextDiv, { renderType: this.context.renderType, children: [this.renderVariableName(), this.renderError(), this.renderTestValue(testcontext)] })) : (this.renderMissingElement()) }));
        }
        else if (this.props.el.valueType === ExpressionValueType_1.ExpressionValueType.VALUE) {
            return ((0, jsx_runtime_1.jsx)(SelectedElement, { renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression, children: this.props.el.value !== null && this.props.el.value !== undefined ? ((0, jsx_runtime_1.jsxs)(TextDiv, { renderType: this.context.renderType, children: [this.renderValue(), " ", this.renderError()] })) : (this.renderMissingElement()) }));
        }
        else if (this.props.el.valueType === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION) {
            return ((0, jsx_runtime_1.jsxs)(SelectedExpression, { renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression, children: [(0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(this.props.el.subExpression) ?? this.renderMissingElement(), this.renderTestValue(testcontext), this.renderError()] }));
        }
        else {
            return ((0, jsx_runtime_1.jsx)(SelectedElement, { renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression, children: this.renderMissingElement() }));
        }
    }
    renderUnselectedElements(testcontext) {
        if (this.props.el.valueType === ExpressionValueType_1.ExpressionValueType.VARIABLE) {
            return ((0, jsx_runtime_1.jsxs)(exports.VariableElement, { onClick: testcontext ? undefined : this.handleSelectExpression, renderType: this.context.renderType, compactColor: this.context.color, children: [(0, jsx_runtime_1.jsx)("i", { children: this.props.el.variableName ? this.renderVariableName() : this.renderMissingElement() }), this.renderError(), this.renderTestValue(testcontext)] }));
        }
        else if (this.props.el.valueType === ExpressionValueType_1.ExpressionValueType.VALUE) {
            return ((0, jsx_runtime_1.jsx)(ValueElement, { renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression, children: this.props.el.value !== undefined && this.props.el.value !== null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerValueDiv, { renderType: this.context.renderType, children: this.renderValue() }), this.renderError()] })) : (this.renderMissingElement()) }));
        }
        else if (this.props.el.valueType === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION) {
            return ((0, jsx_runtime_1.jsxs)(SubExpressionElement, { onClick: testcontext ? undefined : this.handleSelectExpression, isText: this.context.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT, children: [(0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(this.props.el.subExpression) ?? this.renderMissingElement(), " ", this.renderError(), this.renderTestValue(testcontext)] }));
        }
        else {
            // FOR: this.props.el.valueType === ExpressionValueType.UNSET
            return ((0, jsx_runtime_1.jsx)(MissingElement, { onClick: testcontext ? undefined : this.handleSelectExpression, renderType: this.context.renderType, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.renderMissingElement() }) }));
        }
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "handleSelectExpression", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "renderMissingElement", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "renderError", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "renderVariableName", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "renderValue", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "renderSelectedElements", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueRenderer.prototype, "renderUnselectedElements", null);
exports.ExpressionValueRenderer = ExpressionValueRenderer;
//# sourceMappingURL=ExpressionValueRenderer.js.map