import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { RegisterExpressionElements } from "./registerElements";
import { ExpressionRenderType, ExpressionContext } from "./ExpressionContext";
import { ExpressionValueType } from "./ExpressionValueType";
import { ExpressionValueDialog } from "./Utilities/ExpressionValueDialog";
import { ObserveState } from "../CommonUI/StateManagement/ObserveState";
import { TestContext } from "../Tester/TestContext";
import { TestResult } from "../CommonUI/Testing/TestResult";
import { ValidationInformation } from "../Rule/DesignUI/ValidationInformation";
const WholeExpression = styled.div `
    position: relative;
    height: 100%;
    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
                font-family:    Mulish;
                font-size:      28px;
                color: #677C95;
            `
    : `
                font-family: Inter;
                font-size: 12px;
            `}
`;
const Expression = styled.div `
    width: 100%;

    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
                border: 2px solid lightgray;
                border-radius: 5px;
                padding-top: 20px;
                padding-right: 15px;
                padding-bottom: 20px;
                padding-left: 15px;
            `
    : ``}
`;
const Expects = styled.div `
    padding-top: 15px;
    padding-right: 5px;
    padding-bottom: 15px;
    padding-left: 5px;
    clear: left;
    font-family: Mulish;
    font-size: 12px;

    ${(props) => (props.hasError ? "margin-bottom: 30px" : "")}
`;
export class XExpressionEditor extends React.Component {
    constructor(props) {
        var _a;
        super(props);
        props.expression.editContext.expressionEditor = this;
        props.expression.editContext.onExpressionUpdate = props.onUpdate;
        if (props.openFirstTimeWhenEmptyExpression &&
            (props.expression.valueType === ExpressionValueType.UNSET ||
                (props.expression.valueType === ExpressionValueType.SUBEXPRESSION &&
                    !props.expression.expressionRoot.subExpression))) {
            props.expression.editContext.setSelection((_a = props.expression.expressionRoot) === null || _a === void 0 ? void 0 : _a._id);
        }
        // ensure first registration
        RegisterExpressionElements.doRegistration();
    }
    renderEditDialog() {
        return (_jsx(TestContext.Consumer, { children: (value) => {
                if (value)
                    return null;
                if (this.context.renderType !== ExpressionRenderType.FULL) {
                    return null;
                }
                return (_jsx(ObserveState, { listenTo: this.props.expression.editContext, properties: ["selected"], control: () => {
                        var _a;
                        const selected = (_a = this.props.expression.editContext) === null || _a === void 0 ? void 0 : _a.getSelection();
                        if (!selected)
                            return null;
                        const expressionValue = this.props.expression.editContext.getElement(selected);
                        if (!expressionValue)
                            return null;
                        return _jsx(ExpressionValueDialog, { expressionValue: expressionValue }, void 0);
                    } }, void 0));
            } }, void 0));
    }
    render() {
        return (_jsxs(WholeExpression, Object.assign({ renderType: this.context.renderType, "data-testid": "XExpressionEditor", id: "XExpressionEditor", className: "XExpressionEditor-root" }, { children: [_jsx(Expression, Object.assign({ className: "XExpressionEditor", renderType: this.context.renderType }, { children: this.props.expression.render() }), void 0),
                this.context.renderType === ExpressionRenderType.FULL && (_jsxs(Expects, Object.assign({ hasError: this.props.expression.getDesignValidationIssues().length > 0 }, { children: [_jsxs("i", { children: ["expects ", _jsxs("u", { children: [this.props.expression.getRuleResult().type, " "] }, void 0)] }, void 0), "\u00A0\u00A0result"] }), void 0)),
                this.context.renderType === ExpressionRenderType.FULL && (_jsx(TestResult, { executableId: this.props.expression._id }, void 0)), this.renderEditDialog(), this.context.renderType === ExpressionRenderType.FULL && (_jsx(ObserveState, { listenTo: this.props.expression.editContext, control: () => _jsx(ValidationInformation, { provider: this.props.expression }, void 0) }, void 0))] }), void 0));
    }
}
XExpressionEditor.defaultProps = {
    openFirstTimeWhenEmptyExpression: true,
};
XExpressionEditor.contextType = ExpressionContext;
//# sourceMappingURL=XExpressionEditor.js.map