"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExistsExpressionEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ExpressionRuleEditor_1 = require("../ExpressionRuleEditor");
const DataDefinition_1 = require("@appglue/common/dist/Common/Data/DataDefinition");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const ExpressionStyles_1 = require("../../Builder/ExpressionStyles");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const VariablePicker_1 = tslib_1.__importDefault(require("../../../CommonUI/VariablePicker"));
const ExpressionReactContext_1 = require("../../Structure/ExpressionReactContext");
const AttentionIcon_1 = require("../../../CommonUI/Icon/AttentionIcon");
const ExpressionValueRenderer_1 = require("../../Builder/ExpressionValueRenderer");
const UIStyleConstants_1 = require("@appglue/common/src/Common/UIStyleConstants");
class ExistsExpressionEditor extends ExpressionRuleEditor_1.ExpressionRuleEditor {
    render() {
        let dataDef = this.ruleData.expressionContext?.definition?.getInputDefinition() || new DataDefinition_1.DataDefinition();
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.ruleData, control: () => {
                let validationIssues = this.ruleData.getValidationIssues();
                return ((0, jsx_runtime_1.jsxs)(ExpressionStyles_1.ExpressionPiece, { children: [dataDef && ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: dataDef, control: () => {
                                return ((0, jsx_runtime_1.jsx)(ExistsRender, { selected: this.ruleData.dataPath, data: dataDef, allowNewVariable: this.ruleData.expressionContext?.definition?.canChangeInputs, onVariableSet: (path, def) => {
                                        if (def) {
                                            dataDef.fields.push(def);
                                            this.ruleData.dataPath = def.name;
                                        }
                                        else {
                                            this.ruleData.dataPath = path;
                                        }
                                        StateManager_1.StateManager.propertyChanged(this, "dataPath");
                                    }, issues: validationIssues }));
                            } })), "\u00A0 exists", validationIssues.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ErrorMessageRender, { className: "ExpressionValidation-errorMessage", type: validationIssues[0].level, children: validationIssues[0].issue }) }))] }));
            } }));
    }
}
exports.ExistsExpressionEditor = ExistsExpressionEditor;
const VariablePickerWrapper = styled_components_1.default.div `
    padding: 5px;

    position: relative;

    border: solid 2px transparent;

    border-radius: 8px;

    ${(props) => props.error
    ? `
                
                .ExpressionValidation-errorMessage {
                    opacity: 0;
                    z-index: -1;
                }

                &:hover {
                    border: solid 2px ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};
                    .ExpressionValidation-errorMessage {
                        opacity: 1;
                        z-index: 1;
                    }
                }
            `
    : ``}
`;
const ErrorMessageRender = styled_components_1.default.div `
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
    line-height: 10px;
    letter-spacing: 0.1px;
    text-align: left;

    white-space: pre;

    z-index: 2;

    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    color: ${(props) => (props.type === IDesignValidationProvider_1.ValidationLevel.ERROR ? UIStyleConstants_1.UIStyleConstants.RED_COLOR : "#F4955F")};
`;
const ValidationErrorRender = styled_components_1.default.div `
    position: absolute;
    top: -5px;
    right: 0px;
`;
const VariableRender = styled_components_1.default.div `
    font-size: 14px;
    line-height: 24px;
    border-bottom: dotted 1px #93a9bf;
    font-style: italic;
    display: block;
    color: #677c95;

    border-radius: 4px;

    width: 100%;
    padding: 0 5px;
`;
const ExistsRender = ({ issues, ...props }) => {
    const [open, setOpen] = (0, react_1.useState)(false);
    const context = (0, react_1.useContext)(ExpressionReactContext_1.ExpressionReactContext);
    if (context.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL) {
        return ((0, jsx_runtime_1.jsx)(VariablePickerWrapper, { error: issues.length > 0, children: (0, jsx_runtime_1.jsx)(VariablePicker_1.default, { ...props, open: open, onClose: () => setOpen(false), renderInput: () => ((0, jsx_runtime_1.jsxs)(VariableRender, { onClick: (event) => {
                        event.stopPropagation();
                        event.preventDefault();
                        setOpen(true);
                    }, children: [props.selected, issues.length > 0 && ((0, jsx_runtime_1.jsx)(ValidationErrorRender, { children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) }))] })) }) }));
    }
    return ((0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.VariableElement, { renderType: context.renderType, compactColor: context.color, children: (0, jsx_runtime_1.jsx)("i", { children: props.selected }) }));
};
//# sourceMappingURL=ExistsExpressionEditor.js.map