"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressionBuilder = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const RegisterExpressionRules_1 = require("@appglue/common/dist/Expressions/RegisterExpressionRules");
const ExpressionReactContext_1 = require("./Structure/ExpressionReactContext");
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const ExpressionValueDialog_1 = require("./Utilities/ExpressionValueDialog");
const ObserveState_1 = require("../CommonUI/StateManagement/ObserveState");
const TestContext_1 = require("../CommonUI/Testing/TestContext");
const TestResult_1 = require("../CommonUI/Testing/TestResult");
const ValidationInformation_1 = require("../Rule/DesignUI/ValidationInformation");
const RegisterExpressionRuleEditor_1 = require("./Utilities/RegisterExpressionRuleEditor");
const RegisterExpressionRuleEditors_1 = require("./RegisterExpressionRuleEditors");
const material_1 = require("@mui/material");
const WholeExpression = styled_components_1.default.div `
    height: 100%;
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                font-family:    Mulish;
                font-size:      28px;
                color: #677C95;
            `
    : `
                
                font-size: 12px;
            `}
`;
const Expression = styled_components_1.default.div `
    width: 100%;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                min-height: 200px;
                border: 2px solid lightgray;
                border-radius: 5px;
                padding-top: 20px;
                padding-right: 15px;
                padding-bottom: 20px;
                padding-left: 15px;
            `
    : ``}
`;
const Expects = styled_components_1.default.div `
    padding-top: 15px;
    padding-right: 5px;
    padding-bottom: 15px;
    padding-left: 5px;
    clear: left;

    font-size: 12px;

    ${(props) => (props.hasError ? "margin-bottom: 30px" : "")}
`;
class ExpressionBuilder extends react_1.default.Component {
    static defaultProps = {
        openFirstTimeWhenEmptyExpression: true,
    };
    static contextType = ExpressionReactContext_1.ExpressionReactContext;
    constructor(props) {
        super(props);
        //        props.expression.editContext!.expressionEditor = this;
        props.expression.editContext.onExpressionUpdate = props.onUpdate;
        if (props.openFirstTimeWhenEmptyExpression &&
            (props.expression.valueType === ExpressionValueType_1.ExpressionValueType.UNSET ||
                (props.expression.valueType === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION &&
                    !props.expression.expressionRoot.subExpression))) {
            props.expression.editContext.setSelection(props.expression.expressionRoot?._id);
        }
        // ensure first registration
        RegisterExpressionRules_1.RegiserExpressionRules.doRegistration();
        RegisterExpressionRuleEditors_1.RegisterExpressionRuleEditors.doRegistration();
    }
    renderEditDialog() {
        return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (value) => {
                if (value)
                    return null;
                if (this.context.renderType !== ExpressionReactContext_1.ExpressionRenderType.FULL) {
                    return null;
                }
                return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.expression.editContext, properties: ["selected"], control: () => {
                        const selected = this.props.expression.editContext?.getSelection();
                        if (!selected)
                            return null;
                        const expressionValue = this.props.expression.editContext.getElement(selected);
                        if (!expressionValue)
                            return null;
                        return ((0, jsx_runtime_1.jsx)(ExpressionValueDialog_1.ExpressionValueDialog, { expressionValue: expressionValue, onClose: () => this.props.expression.editContext.clearSelection() }));
                    } }));
            } }));
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(WholeExpression, { renderType: this.context.renderType, "data-testid": "XExpressionEditor", id: "XExpressionEditor", className: "XExpressionEditor-root", children: [(0, jsx_runtime_1.jsx)(Expression, { className: "XExpressionEditor", renderType: this.context.renderType, children: (0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(this.props.expression.rootExpression) }), this.context.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL && ((0, jsx_runtime_1.jsx)(TestResult_1.TestResult, { executableId: this.props.expression._id })), this.renderEditDialog(), this.context.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.expression.editContext, control: () => (0, jsx_runtime_1.jsx)(ValidationInformation_1.ValidationInformation, { provider: this.props.expression }) }), (0, jsx_runtime_1.jsxs)(Expects, { hasError: this.props.expression.getDesignValidationIssues().length > 0, children: [(0, jsx_runtime_1.jsxs)("i", { children: ["expects ", (0, jsx_runtime_1.jsxs)("u", { children: [this.props.expression.getRuleResult().type, " "] })] }), "\u00A0\u00A0result"] })] }))] }));
    }
}
exports.ExpressionBuilder = ExpressionBuilder;
//# sourceMappingURL=ExpressionBuilder.js.map