import { __decorate, __metadata } from "tslib";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { ExpressionValueType } from "./ExpressionValueType";
import styled from "styled-components";
import { AutoBind } from "../Common/AutoBind";
import { ExpressionContext, ExpressionRenderType } from "./ExpressionContext";
import { XDataType } from "../Common/Data/XDataType";
import { ValidationError } from "./Utilities/ValidationError";
import { TestContext } from "../Tester/TestContext";
import { ExpressionTestResultColorContext } from "./Test/ExpressionTestResultColorContext";
import { Tooltip } from "@material-ui/core";
import { ObserveMultiState } from "../CommonUI/StateManagement/ObserveMultiState";
const SelectedElement = styled.span `
    display: flex;
    align-items: center;

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

    position: relative;
    overflow: visible;
    ${(props) => props.renderType === 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-family: Inter;
                font-style: normal;
                font-weight: 500;
                font-size: 12px;
                line-height: 20px;
                color: #272932;
                white-space: pre;
        `}
`;
const ExpressionValueWrapper = styled.div `
    position: relative;
    overflow: visible;
    display: flex;

    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
            padding-right: 4px;
            padding-left: 4px;
            flex: 1;
        `
    : ``}
`;
const ValueElement = styled.div `
    ${(props) => {
    var _a;
    return props.renderType === ExpressionRenderType.FULL
        ? `
                border: 2px solid white;
                border-radius: 4px;
                background-color: #D8E4EE;
                color: #4B6080;
                margin-right: 5px;
                margin-left: 5px;
                font-family: Mulish;
                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-family: Inter;
                font-style: normal;
                font-weight: 500;
                font-size: 12px;
                line-height: 20px;
                color: ${((_a = props.compactColor) === null || _a === void 0 ? void 0 : _a.value) || "#272932"};
                white-space: pre;
            `;
}}
    display: inline-flex;
    align-items: center;
    position: relative;
`;
const VariableElement = styled.div `
    display: flex;

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

    cursor: pointer;
    position: relative;

    > i {
        ${(props) => {
    var _a;
    return props.renderType === 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: 20px;
                    color: ${((_a = props.compactColor) === null || _a === void 0 ? void 0 : _a.variable) || "rgba(39, 41, 50, 0.6)"};
                    white-space: pre;
                `;
}}
    }
    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
            padding: 3px 0;
            margin-right: 4px;
            margin-left: 4px;
            &:hover {
                > i {
                    border-bottom: solid 2px #93A9BF; 
                }
            }
        `
    : ``}
`;
const InnerValueDiv = styled.div `
    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
            padding: 4px 8px;
            display: flex;
        `
    : `
            padding: 0 4px;
        `}
`;
const SubExpressionElement = styled.div `
    position: relative;
    display: flex;

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

    line-height: 1;

    white-space: pre;

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

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

    line-height: 1;

    white-space: pre;

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

    ${(props) => {
    var _a;
    return props.renderType === ExpressionRenderType.FULL
        ? `
            color: #1D6295;
            padding: 4px 12px;
            font-family: Mulish;
            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-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0px;
            text-align: left;
            color: ${((_a = props.compactColor) === null || _a === void 0 ? void 0 : _a.missing) || "rgba(39, 41, 50, 0.3)"};
            white-space: pre;
        `;
}}
`;
const TextDiv = styled("div") `
    line-height: 20px;
    color: #4b6080;

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

            `}
`;
export class ExpressionValueRenderer extends React.Component {
    handleSelectExpression(event) {
        var _a;
        if (this.context.renderType === ExpressionRenderType.FULL) {
            event.stopPropagation();
            (_a = this.props.el.editContext) === null || _a === void 0 ? void 0 : _a.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 ? "#35B687" : "#EE3E54";
        return color;
    }
    render() {
        return (_jsx(TestContext.Consumer, { children: (testcontext) => {
                return (_jsx(ExpressionValueWrapper, Object.assign({ renderType: this.context.renderType, id: this.props.el._id }, { children: _jsx(ObserveMultiState, { listenTo: [this.props.el, this.props.el.editContext], control: () => {
                            var _a, _b;
                            let selected = false;
                            if ((_a = this.props.el.editContext) === null || _a === void 0 ? void 0 : _a.getSelection()) {
                                selected = ((_b = this.props.el.editContext) === null || _b === void 0 ? void 0 : _b.getSelection()) === this.props.el._id;
                            }
                            return (_jsx(_Fragment, { children: 
                                // no need to render for selected elements when compact version
                                selected
                                    ? this.renderSelectedElements(testcontext)
                                    : this.renderUnselectedElements(testcontext) }, void 0));
                        } }, void 0) }), void 0));
            } }, void 0));
    }
    renderMissingElement() {
        var _a, _b;
        let text = (_b = (_a = this.props.el.editContext) === null || _a === void 0 ? void 0 : _a.emptyExpressionText) !== null && _b !== void 0 ? _b : this.context.missing.default;
        switch (this.props.el.valueType) {
            case ExpressionValueType.SUBEXPRESSION:
                text = this.context.missing.subexpression;
                break;
            case ExpressionValueType.VARIABLE:
                text = this.context.missing.variable;
                break;
            case ExpressionValueType.VALUE:
                text = this.context.missing.value;
                break;
        }
        return (_jsxs(MissingTextDiv, Object.assign({ renderType: this.context.renderType }, { children: [text, this.renderError()] }), void 0));
    }
    renderError() {
        return _jsx(ValidationError, { value: this.props.el }, void 0);
    }
    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 === XDataType.BOOLEAN) {
            return this.props.el.value ? "True" : "False";
        }
        else {
            return this.props.el.value;
        }
    }
    renderTestValue(textcontext) {
        var _a, _b, _c;
        if (!textcontext)
            return null;
        let testitem;
        let itemid = this.props.el._id;
        testitem = textcontext.findItem(itemid);
        if (!testitem) {
            return null;
        }
        if (!testitem.isError) {
            return (_jsx(ExpressionTestResultColorContext.Consumer, { children: (testcolor) => (_jsx(_Fragment, { children: this.context.renderType === ExpressionRenderType.TEXT ? (_jsx(TestValueRender, Object.assign({ type: this.props.el.valueType, color: testcolor }, { children: testitem === null || testitem === void 0 ? void 0 : testitem.result }), void 0)) : (_jsx(FullModeTestValueRender, Object.assign({ type: this.props.el.valueType, color: testcolor }, { children: testitem === null || testitem === void 0 ? void 0 : testitem.result }), void 0)) }, void 0)) }, void 0));
        }
        if (this.props.el._id === ((_c = (_b = (_a = this.props.el.editContext) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.expressionRoot) === null || _c === void 0 ? void 0 : _c._id))
            return null;
        return (_jsx(Tooltip, Object.assign({ title: testitem.result }, { children: _jsx(TestErrorValueRender, {}, void 0) }), void 0));
    }
    renderSelectedElements(testcontext) {
        var _a, _b;
        if (this.props.el.valueType === ExpressionValueType.VARIABLE) {
            return (_jsx(SelectedElement, Object.assign({ renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression }, { children: this.props.el.variableName ? (_jsxs(TextDiv, Object.assign({ renderType: this.context.renderType }, { children: [this.renderVariableName(), this.renderError(), this.renderTestValue(testcontext)] }), void 0)) : (this.renderMissingElement()) }), void 0));
        }
        else if (this.props.el.valueType === ExpressionValueType.VALUE) {
            return (_jsx(SelectedElement, Object.assign({ renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression }, { children: this.props.el.value !== null && this.props.el.value !== undefined ? (_jsxs(TextDiv, Object.assign({ renderType: this.context.renderType }, { children: [this.renderValue(), " ", this.renderError()] }), void 0)) : (this.renderMissingElement()) }), void 0));
        }
        else if (this.props.el.valueType === ExpressionValueType.SUBEXPRESSION) {
            return (_jsxs(SelectedExpression, Object.assign({ renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression }, { children: [(_b = (_a = this.props.el.subExpression) === null || _a === void 0 ? void 0 : _a.render()) !== null && _b !== void 0 ? _b : this.renderMissingElement(), this.renderTestValue(testcontext), this.renderError()] }), void 0));
        }
        else {
            return (_jsx(SelectedElement, Object.assign({ renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression }, { children: this.renderMissingElement() }), void 0));
        }
    }
    renderUnselectedElements(testcontext) {
        var _a, _b;
        if (this.props.el.valueType === ExpressionValueType.VARIABLE) {
            return (_jsxs(VariableElement, Object.assign({ onClick: testcontext ? undefined : this.handleSelectExpression, renderType: this.context.renderType, compactColor: this.context.color }, { children: [_jsx("i", { children: this.props.el.variableName ? this.renderVariableName() : this.renderMissingElement() }, void 0), this.renderError(), this.renderTestValue(testcontext)] }), void 0));
        }
        else if (this.props.el.valueType === ExpressionValueType.VALUE) {
            return (_jsx(ValueElement, Object.assign({ renderType: this.context.renderType, onClick: testcontext ? undefined : this.handleSelectExpression }, { children: this.props.el.value !== undefined && this.props.el.value !== null ? (_jsxs(_Fragment, { children: [_jsx(InnerValueDiv, Object.assign({ renderType: this.context.renderType }, { children: this.renderValue() }), void 0), this.renderError()] }, void 0)) : (this.renderMissingElement()) }), void 0));
        }
        else if (this.props.el.valueType === ExpressionValueType.SUBEXPRESSION) {
            return (_jsxs(SubExpressionElement, Object.assign({ onClick: testcontext ? undefined : this.handleSelectExpression, isText: this.context.renderType === ExpressionRenderType.TEXT }, { children: [(_b = (_a = this.props.el.subExpression) === null || _a === void 0 ? void 0 : _a.render()) !== null && _b !== void 0 ? _b : this.renderMissingElement(), " ", this.renderError(), this.renderTestValue(testcontext)] }), void 0));
        }
        else {
            // FOR: this.props.el.valueType === ExpressionValueType.UNSET
            return (_jsx(MissingElement, Object.assign({ onClick: testcontext ? undefined : this.handleSelectExpression, renderType: this.context.renderType }, { children: _jsx(_Fragment, { children: this.renderMissingElement() }, void 0) }), void 0));
        }
    }
}
ExpressionValueRenderer.contextType = ExpressionContext;
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "handleSelectExpression", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "renderMissingElement", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "renderError", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "renderVariableName", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "renderValue", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "renderSelectedElements", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ExpressionValueRenderer.prototype, "renderUnselectedElements", null);
//# sourceMappingURL=ExpressionValueRenderer.js.map