"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledButton = exports.XValueOrExpressionEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const ExpressionView_1 = require("../../Expressions/Builder/ExpressionView");
const TestContext_1 = require("../Testing/TestContext");
const DataEditing_1 = require("../DataEditing");
const XValueOrExpressionEditor = ({ expression, onUpdate, hideValidation, ...props }) => {
    let forData = expression.getRuleResult();
    const [openEditLayer, setOpenEditLayer] = (0, react_1.useState)(props.open || false);
    const [valueEditorMode, setValueEditorMode] = (0, react_1.useState)("display_mode");
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const isShowValueEditor = (0, react_1.useMemo)(() => {
        return ((expression.valueType === ExpressionValueType_1.ExpressionValueType.UNSET ||
            expression.valueType === ExpressionValueType_1.ExpressionValueType.VALUE) &&
            !openEditLayer);
    }, [expression, openEditLayer]);
    let value;
    if (expression.valueType === ExpressionValueType_1.ExpressionValueType.VALUE) {
        value = expression.value;
    }
    else {
        value = forData.getValue();
    }
    (0, react_1.useEffect)(() => {
        setOpenEditLayer(props.open || false);
    }, [props.open]);
    const onValueUpdate = (newValue) => {
        forData.setValue(newValue);
        onUpdate(newValue);
    };
    const onExpressionUpdate = () => {
        if (props.onClose) {
            props.onClose();
        }
        else {
            setOpenEditLayer(false);
        }
        onUpdate(expression);
    };
    const onClick = () => {
        if (isShowValueEditor) {
            setValueEditorMode("edit_mode");
            if (forData.type === DataTypes_1.DataTypes.BOOLEAN) {
                onValueUpdate(!value);
            }
        }
    };
    const onOpenExpressionLayer = (event) => {
        event.stopPropagation();
        setOpenEditLayer(true);
    };
    if (testContext) {
        return ((0, jsx_runtime_1.jsx)(Render, { children: isShowValueEditor ? ((0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: forData, mode: valueEditorMode, value: value, onUpdate: onValueUpdate })) : ((0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: expression, defaultOpen: openEditLayer, onDone: onExpressionUpdate, hideValidation: hideValidation })) }));
    }
    return ((0, jsx_runtime_1.jsxs)(Render, { onClick: onClick, children: [isShowValueEditor ? ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: () => {
                    if (isShowValueEditor) {
                        setValueEditorMode("display_mode");
                    }
                }, children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: forData, mode: valueEditorMode, value: value, onUpdate: onValueUpdate }) }) })) : ((0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: expression, defaultOpen: openEditLayer, onDone: onExpressionUpdate, hideValidation: hideValidation })), (0, jsx_runtime_1.jsx)("div", { className: "Action-group", children: valueEditorMode === "display_mode" && ((0, jsx_runtime_1.jsx)(exports.StyledButton, { onClick: onOpenExpressionLayer, "data-testid": "switch-view-edit", children: "Edit" })) })] }));
};
exports.XValueOrExpressionEditor = XValueOrExpressionEditor;
const Render = styled_components_1.default.div `
    position: relative;

    .Action-group {
        position: absolute;
        right: 5px;
        bottom: 5px;
        display: flex;
        opacity: 0;
    }

    &:hover .Action-group {
        opacity: 1;
    }
`;
exports.StyledButton = styled_components_1.default.div `
    text-decoration: underline;
    color: #3f51b5;

    cursor: pointer;
`;
//# sourceMappingURL=XValueOrExpressionEditor.js.map