import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { ExpressionValue } from "../ExpressionValue";
import { ExpressionValueType } from "../ExpressionValueType";
import { ExpressionRegistration } from "./RegisterExpression";
import { AutoBind } from "../../Common/AutoBind";
import { BackIcon } from "../../CommonUI/Icon/BackIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import VariablePicker from "../../CommonUI/VariablePicker";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { XValueEditor } from "../../CommonUI/DataEditing";
import { StyledButton } from "../../CommonUI/Components/Button";
import { PlusGrayIcon } from "../../CommonUI/Icon/PlusGrayIcon";
import { InsertExpressionPage } from "./InsertExpressionPage";
import { ExpressionsGrid } from "./CommonUI";
import { ToolboxPanel } from "./ToolboxPanel";
import { AddExpressionButton } from "./AddExpressionButton";
import { ModeButtons } from "./ModeButtons";
import { BaseExpression } from "../BaseExpression";
import { ValidationError } from "./ValidationError";
import { Layer } from "../../CommonUI/Components/Layer";
import { XDataType } from "../../Common/Data/XDataType";
import { StyledLink } from "../../CommonUI/BuildUI/Link";
const ExpressionValueSlotEditor = styled.div `
    font-family: Mulish;
    font-size: 16px;
    background: #ffffff;
    box-shadow: 4px 4px 4px rgba(21, 84, 115, 0.05), 8px 8px 40px rgba(147, 169, 191, 0.28);
    border-radius: 4px;
    background: #fff;
    width: 650px;
    z-index: 101;
    max-height: none;
    padding: 16px 20px;
`;
const Header = styled.div `
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;

    width: 100%;
    display: flex;
    color: #272932;

    align-items: center;
`;
const HeaderFloatRight = styled.div `
    display: flex;
    margin-left: auto;
    justify-content: flex-end;
    padding-right: 15px;
    align-items: center;

    & > * {
        margin-left: 8px !important;
        &:first-child {
            margin-left: 0 !important;
        }
    }
`;
const ExpressionColContainer = styled.div `
    display: flex;
    width: 100%;
    height: 250px;
    padding: 8px;
    flex-wrap: wrap;
`;
const ExpressionViewPanel = styled.div `
    width: 100%;
    max-height: 376px;
    min-height: 96px;
    padding: 20px 0;
    clear: both;
    display: flex;
    flex-direction: column;
`;
const ExpressionViewPanelLine = styled.div `
    width: 100%;
    justify-content: flex-start;
    clear: both;
    text-transform: none;

    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
`;
const ExpressionViewPanelLineCenter = styled.div `
    position: relative;
    display: flex;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    clear: both;
    min-height: 120px;
    border-radius: 5px;
    flex: 1;
    overflow: auto;
    width: 100%;

    border: 1px solid rgba(39, 41, 50, 0.2);
    box-sizing: border-box;
    border-radius: 4px;

    flex-direction: column;

    padding: 20px;
`;
const VariableOrValColumn = styled.div `
    border-left: 2px solid #ebf4fa;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    padding-left: 10px;
    padding-right: 10px;
`;
const ExpressionColumn = styled.div `
    width: 33%;
    padding-right: 12px;
`;
const VariableOrValContentPanel = styled.div `
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    height: 332px;
`;
const VariableContent = styled.div `
    display: flex;
    flex-direction: column;

    .VariablePicker_Content {
        background: #fff;
    }
`;
export class ExpressionValueDialog extends React.Component {
    constructor(props) {
        var _a, _b, _c;
        super(props);
        this.state = {
            inserting: false,
            variableMode: this.props.expressionValue.variableName === ((_c = (_b = (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.requiredVariable) === null || _c === void 0 ? void 0 : _c.name)
                ? "use"
                : "pick",
        };
    }
    render() {
        return (_jsx(Layer, { open: true, maxWidth: false, padding: "0px", renderUI: () => {
                return (_jsxs(ExpressionValueSlotEditor, Object.assign({ className: "EditExpressionModal__root" }, { children: [_jsx(ObserveState, { listenTo: this.props.expressionValue, properties: ["valueTypeValue", "valueType"], control: () => (_jsxs(_Fragment, { children: [this.renderHeader(), this.state.inserting ? (_jsx(InsertExpressionPage, { expressionValue: this.props.expressionValue, onComplete: this.insertExpression, onCancel: () => this.setState({ inserting: false }) }, void 0)) : (this.renderPage())] }, void 0)) }, void 0),
                        _jsxs(DialogActions, { children: [_jsx(StyledLink, Object.assign({ onClick: () => {
                                        this.props.expressionValue.clear();
                                    }, style: {
                                        marginRight: 15,
                                    } }, { children: "Clear" }), void 0),
                                _jsx(StyledButton, Object.assign({ color: "primary", variant: "contained", onClick: this.handleClose }, { children: "Complete" }), void 0)] }, void 0)] }), void 0));
            } }, void 0));
    }
    renderHeader() {
        var _a;
        return (_jsxs(Header, { children: [_jsx("span", { children: "Edit Expression Value" }, void 0),
                _jsxs(HeaderFloatRight, { children: [((_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.getParentExpressionValue(this.props.expressionValue._id)) &&
                            !this.state.inserting && (_jsx(StyledButton, Object.assign({ size: "small", onClick: this.onSelectParent, variant: "outlined" }, { children: "Select Parent" }), void 0)),
                        !this.state.inserting && this.props.expressionValue.valueType !== ExpressionValueType.UNSET && (_jsx(StyledButton, Object.assign({ size: "small", onClick: () => {
                                this.setState({ inserting: true });
                            }, variant: "outlined" }, { children: "Insert Expression" }), void 0))] }, void 0)] }, void 0));
    }
    renderPage() {
        switch (this.props.expressionValue.valueType) {
            case ExpressionValueType.SUBEXPRESSION:
                return (_jsxs(_Fragment, { children: [_jsx(ModeButtons, { value: this.props.expressionValue }, void 0),
                        // no expression, render the toolbox
                        !this.props.expressionValue.subExpression ? (_jsx(ToolboxPanel, { large: false, expressionValue: this.props.expressionValue, onExpressionSelected: (registration) => {
                                var _a;
                                let exp = registration.create();
                                this.props.expressionValue.subExpression = exp;
                                (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.setSelection(this.props.expressionValue._id);
                            } }, void 0)) : (this.renderExpressionPanel())] }, void 0));
            case ExpressionValueType.VARIABLE:
                return (_jsxs(_Fragment, { children: [_jsx(ModeButtons, { value: this.props.expressionValue }, void 0),
                        _jsx(VariableOrValContentPanel, { children: _jsx(VariableContent, { children: this.renderVariableControl() }, void 0) }, void 0)] }, void 0));
            case ExpressionValueType.VALUE:
                return (_jsxs(_Fragment, { children: [_jsx(ModeButtons, { value: this.props.expressionValue }, void 0),
                        _jsx(VariableOrValContentPanel, { children: this.renderValueControl() }, void 0)] }, void 0));
            case ExpressionValueType.UNSET:
                return (_jsxs(_Fragment, { children: [_jsx(ModeButtons, { value: this.props.expressionValue }, void 0),
                        _jsxs(ExpressionColContainer, { children: [_jsxs(ExpressionColumn, { children: [_jsx(ExpressionsGrid, Object.assign({ columnCount: 2 }, { children: ExpressionRegistration.getCommonExpressions(this.props.expressionValue.editContext.expression.getInputDefinition())
                                                .splice(0, 10)
                                                .map((expression, key) => (_jsx(AddExpressionButton, { expression: this.props.expressionValue, hideLabel: false, registration: expression, onClick: () => {
                                                    var _a;
                                                    let exp = expression.create();
                                                    this.props.expressionValue.subExpression = exp;
                                                    (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.setSelection(this.props.expressionValue._id);
                                                } }, key))) }), void 0),
                                        _jsx("div", Object.assign({ style: { marginTop: 10, textAlign: "center" } }, { children: _jsx(StyledButton, Object.assign({ size: "small", onClick: () => {
                                                    this.props.expressionValue.valueType = ExpressionValueType.SUBEXPRESSION;
                                                }, startIcon: _jsx(PlusGrayIcon, {}, void 0) }, { children: "Show More" }), void 0) }), void 0)] }, void 0),
                                _jsx(VariableOrValColumn, { children: _jsx(VariableContent, { children: _jsx(StyledButton, Object.assign({ color: "primary", variant: "outlined", "data-testid": "XExpressionValueDialog-pick-variableName", onClick: (event) => {
                                                var _a;
                                                this.props.expressionValue.valueType = ExpressionValueType.VARIABLE;
                                                (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.setSelection(this.props.expressionValue._id);
                                            } }, { children: "Pick Data Name" }), void 0) }, void 0) }, void 0),
                                _jsx(VariableOrValColumn, { children: _jsx(StyledButton, Object.assign({ color: "primary", variant: "outlined", "data-testid": "XExpressionValueDialog-pick-value", onClick: (event) => {
                                            var _a;
                                            this.props.expressionValue.valueType = ExpressionValueType.VALUE;
                                            (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.setSelection(this.props.expressionValue._id);
                                        } }, { children: "Enter Data Value" }), void 0) }, void 0)] }, void 0)] }, void 0));
        }
    }
    renderValueControl() {
        return (_jsxs(ValueRender, Object.assign({ "data-testid": "ValueDialog-valueEditor" }, { children: [_jsx(ControlLabel, Object.assign({ isCenter: this.props.expressionValue.expectedType.type === XDataType.BOOLEAN }, { children: "Enter Data Value" }), void 0),
                _jsx(XValueEditor, { forData: this.props.expressionValue.expectedType, value: this.props.expressionValue.value, onUpdate: this.valueChange, mode: "edit_mode" }, void 0)] }), void 0));
    }
    canRenderVariablePicker() {
        var _a, _b, _c, _d, _e, _f;
        if (!((_b = (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.requiredVariable))
            return true;
        else if (this.state.variableMode === "pick" &&
            ((_e = (_d = (_c = this.props.expressionValue.editContext) === null || _c === void 0 ? void 0 : _c.definition) === null || _d === void 0 ? void 0 : _d.requiredVariable) === null || _e === void 0 ? void 0 : _e.name) !== ((_f = this.props.expressionValue) === null || _f === void 0 ? void 0 : _f.variableName))
            return true;
        return false;
    }
    renderVariableControl() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        const dataDefinition = this.props.expressionValue.editContext.expression.getInputDefinition();
        if ((_b = (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.requiredVariable) {
            return (_jsx(_Fragment, { children: _jsxs(UseOrPickRender, { children: [_jsxs(UseOrPickItemRender, Object.assign({ selected: this.state.variableMode === "use", onClick: () => {
                                var _a, _b, _c, _d, _e;
                                if ((_b = (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.requiredVariable) {
                                    this.props.expressionValue.variableName = (_e = (_d = (_c = this.props.expressionValue.editContext) === null || _c === void 0 ? void 0 : _c.definition) === null || _d === void 0 ? void 0 : _d.requiredVariable) === null || _e === void 0 ? void 0 : _e.name;
                                }
                                this.handleClose();
                            } }, { children: [_jsx(UseOrPickTitle, { children: "Use Suggested Data Name" }, void 0),
                                _jsx(RequiredVariableRender, { children: (_e = (_d = (_c = this.props.expressionValue.editContext) === null || _c === void 0 ? void 0 : _c.definition) === null || _d === void 0 ? void 0 : _d.requiredVariable) === null || _e === void 0 ? void 0 : _e.name }, void 0)] }), void 0),
                        _jsx("span", { children: "or" }, void 0),
                        _jsxs(UseOrPickItemRender, Object.assign({ selected: this.state.variableMode === "pick", onClick: () => this.setState({ variableMode: "pick" }) }, { children: [_jsx(UseOrPickTitle, { children: _jsx(ControlLabel, { children: ((_f = this.props.expressionValue.editContext.expression) === null || _f === void 0 ? void 0 : _f.canChangeInputs) ? `Pick or Create Data Name`
                                            : `Pick Data Name` }, void 0) }, void 0),
                                _jsx(VariablePicker, { data: dataDefinition, onVariableSet: (path, def) => {
                                        if (def) {
                                            dataDefinition.fields.push(def);
                                            this.props.expressionValue.variableName = def.name;
                                            StateManager.propertyChanged(dataDefinition, "fields");
                                        }
                                        else {
                                            this.props.expressionValue.variableName = path;
                                        }
                                    }, selected: this.state.variableMode ? this.props.expressionValue.variableName : undefined, allowNewVariable: (_g = this.props.expressionValue.editContext.expression) === null || _g === void 0 ? void 0 : _g.canChangeInputs, requiredType: this.props.expressionValue.expectedType.type, isList: this.props.expressionValue.expectedType.list }, void 0)] }), void 0)] }, void 0) }, void 0));
        }
        return (_jsxs(_Fragment, { children: [_jsx(ControlLabel, { children: ((_h = this.props.expressionValue.editContext.expression) === null || _h === void 0 ? void 0 : _h.canChangeInputs) ? `Pick or Create Data Name`
                        : `Pick Data Name` }, void 0),
                _jsx(VariablePicker, { data: dataDefinition, onVariableSet: (path, def) => {
                        if (def) {
                            dataDefinition.fields.push(def);
                            this.props.expressionValue.variableName = def.name;
                            StateManager.propertyChanged(dataDefinition, "fields");
                        }
                        else {
                            this.props.expressionValue.variableName = path;
                        }
                    }, selected: this.props.expressionValue.variableName, allowNewVariable: (_j = this.props.expressionValue.editContext.expression) === null || _j === void 0 ? void 0 : _j.canChangeInputs, startOpenIfEmptyOrInvalid: true, requiredType: this.props.expressionValue.expectedType.type, isList: this.props.expressionValue.expectedType.list }, void 0)] }, void 0));
    }
    handleClose() {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.clearSelection();
        switch (this.props.expressionValue.valueType) {
            case ExpressionValueType.VARIABLE:
                if (!this.props.expressionValue.variableName) {
                    if (this.state.variableMode === "use" && ((_c = (_b = this.props.expressionValue.editContext) === null || _b === void 0 ? void 0 : _b.definition) === null || _c === void 0 ? void 0 : _c.requiredVariable)) {
                        this.props.expressionValue.variableName = (_f = (_e = (_d = this.props.expressionValue.editContext) === null || _d === void 0 ? void 0 : _d.definition) === null || _e === void 0 ? void 0 : _e.requiredVariable) === null || _f === void 0 ? void 0 : _f.name;
                    }
                    else {
                        this.props.expressionValue.valueType = ExpressionValueType.UNSET;
                    }
                }
                break;
            case ExpressionValueType.VALUE:
                if (this.props.expressionValue.value === null || this.props.expressionValue.value === undefined)
                    this.props.expressionValue.valueType = ExpressionValueType.UNSET;
                break;
            case ExpressionValueType.SUBEXPRESSION:
                if (!this.props.expressionValue.subExpression)
                    this.props.expressionValue.valueType = ExpressionValueType.UNSET;
                break;
        }
        (_g = this.props.expressionValue.editContext) === null || _g === void 0 ? void 0 : _g.clearSelection();
        (_h = this.props.expressionValue.editContext) === null || _h === void 0 ? void 0 : _h.refresh();
    }
    onSelectParent() {
        var _a, _b;
        let parent = (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.getParentExpressionValue(this.props.expressionValue._id);
        if (parent) {
            (_b = this.props.expressionValue.editContext) === null || _b === void 0 ? void 0 : _b.setSelection(parent._id);
        }
    }
    insertExpression(position, inserted, selected) {
        var _a, _b;
        // pick expression, pick what slot in expression you are.
        let ev = (_a = inserted.editContext) === null || _a === void 0 ? void 0 : _a.getElement(selected);
        if (!ev)
            throw new Error("could not find expression value");
        switch (position.valueType) {
            case ExpressionValueType.SUBEXPRESSION:
                ev.subExpression = position.subExpression;
                break;
            case ExpressionValueType.VALUE:
                ev.value = position.value;
                break;
            case ExpressionValueType.VARIABLE:
                ev.variableName = position.variableName;
                break;
        }
        position.subExpression = inserted;
        (_b = position.editContext) === null || _b === void 0 ? void 0 : _b.setSelection(position._id);
        this.setState({
            inserting: false,
        });
    }
    valueChange(newValue) {
        this.props.expressionValue.value = newValue;
        this.forceUpdate();
    }
    renderExpressionPanel() {
        var _a;
        let type = Reflect.get(this.props.expressionValue.subExpression, "__type");
        const expression = ExpressionRegistration.getExpressionByType(type, this.props.expressionValue.editContext.expression.getInputDefinition());
        return (_jsx(_Fragment, { children: this.props.expressionValue.subExpression ? (_jsxs(ExpressionViewPanel, { children: [_jsx(ExpressionViewPanelLine, { children: _jsx(StyledButton, Object.assign({ size: "small", onClick: () => {
                                var _a;
                                this.props.expressionValue.subExpression = undefined;
                                (_a = this.props.expressionValue.editContext) === null || _a === void 0 ? void 0 : _a.setSelection(this.props.expressionValue._id);
                            }, "data-testid": "XExpressionValueDialog-reset-expression", startIcon: _jsx(BackIcon, {}, void 0) }, { children: expression === null || expression === void 0 ? void 0 : expression.name }), void 0) }, void 0),
                    _jsx(ExpressionViewPanelLineCenter, { children: _jsxs(SubExpressionRender, { children: [(_a = this.props.expressionValue.subExpression) === null || _a === void 0 ? void 0 : _a.render(), _jsx(ValidationError, { value: this.props.expressionValue }, void 0)] }, void 0) }, void 0)] }, void 0)) : (_jsx(_Fragment, {}, void 0)) }, void 0));
    }
}
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueDialog.prototype, "canRenderVariablePicker", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueDialog.prototype, "renderVariableControl", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueDialog.prototype, "handleClose", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ExpressionValueDialog.prototype, "onSelectParent", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [ExpressionValue, BaseExpression, String]),
    __metadata("design:returntype", void 0)
], ExpressionValueDialog.prototype, "insertExpression", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ExpressionValueDialog.prototype, "valueChange", null);
const ValueRender = styled.div `
    .XValueEditor-editWrapper {
        justify-content: center;
        display: flex;
    }
`;
const DialogActions = styled.div `
    padding: 20px 0 0;
    border-top: solid 1px rgba(39, 41, 50, 0.1);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
`;
const UseOrPickRender = styled.div `
    display: flex;
    align-items: center;

    //styleName: text/Inter Medium 12px;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: center;

    color: rgb(96, 104, 129, 0.6);

    > * {
        margin-left: 8px;

        &:first-child {
            margin-left: 0;
        }
    }
`;
const UseOrPickItemRender = styled.div `
    background: #fcfcfe;
    /* main/border */

    border: 1px solid ${(props) => (props.selected ? "#4050A6" : "#f1f1f6")};
    box-sizing: border-box;
    border-radius: 4px;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding: 16px 20px;

    width: 210px;
    height: 110px;
`;
const UseOrPickTitle = styled.div `
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: center;
    color: #272932;

    margin-bottom: 16px;
`;
const RequiredVariableRender = styled.div `
    width: 93px;
    height: 41px;
    background: rgba(64, 80, 166, 0.1);

    //styleName: text/Inter Medium 14px;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;
    color: #4050a6;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(64, 80, 166, 0.1);
    box-sizing: border-box;
    border-radius: 4px;
`;
const SubExpressionRender = styled.div `
    position: relative;
`;
const ControlLabel = styled.div `
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: ${(props) => (props.isCenter ? "center" : "left")};
    color: #4050a6;
    margin-bottom: 10px;
`;
//# sourceMappingURL=ExpressionValueDialog.js.map