import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickAwayListener } from "@material-ui/core";
import React, { useState } from "react";
import styled from "styled-components";
import { ExpressionValueType } from "../../Expressions/ExpressionValueType";
import { XExpressionView } from "../../Expressions/XExpressionView";
import { TestContext } from "../../Tester/TestContext";
import { XValueEditor } from "../DataEditing";
import { EditGrayIcon } from "../Icon/EditGrayIcon";
export const XValueOrExpressionEditor = ({ expression, onUpdate, hideValidation }) => {
    let forData = expression.getRuleResult();
    const [openEditLayer, setOpenEditLayer] = useState(false);
    const [valueEditorMode, setValueEditorMode] = useState("display_mode");
    const testContext = React.useContext(TestContext);
    const isShowValueEditor = (expression.valueType === ExpressionValueType.UNSET || expression.valueType === ExpressionValueType.VALUE) &&
        !openEditLayer;
    let value;
    if (expression.valueType === ExpressionValueType.VALUE) {
        value = expression.value;
    }
    else {
        value = forData.getValue();
    }
    const onValueUpdate = (newValue) => {
        forData.setValue(newValue);
        onUpdate(newValue);
    };
    const onExpressionUpdate = () => {
        setOpenEditLayer(false);
        onUpdate(expression);
    };
    const onClick = () => {
        if (isShowValueEditor) {
            setValueEditorMode("edit_mode");
        }
    };
    const onOpenExpressionLayer = (event) => {
        event.stopPropagation();
        setOpenEditLayer(true);
    };
    if (testContext) {
        return (_jsx(Render, { children: isShowValueEditor ? (_jsx(XValueEditor, { forData: forData, mode: valueEditorMode, value: value, onUpdate: onValueUpdate }, void 0)) : (_jsx(XExpressionView, { expression: expression, defaultOpen: openEditLayer, onDone: onExpressionUpdate, hideValidation: hideValidation }, void 0)) }, void 0));
    }
    return (_jsxs(Render, Object.assign({ onClick: onClick }, { children: [isShowValueEditor ? (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => {
                    if (isShowValueEditor) {
                        setValueEditorMode("display_mode");
                    }
                } }, { children: _jsx("span", { children: _jsx(XValueEditor, { forData: forData, mode: valueEditorMode, value: value, onUpdate: onValueUpdate }, void 0) }, void 0) }), void 0)) : (_jsx(XExpressionView, { expression: expression, defaultOpen: openEditLayer, onDone: onExpressionUpdate, hideValidation: hideValidation }, void 0)),
            _jsx("div", Object.assign({ className: "Action-group" }, { children: valueEditorMode === "display_mode" && (_jsx(StyledButton, Object.assign({ onClick: onOpenExpressionLayer }, { children: _jsx(EditGrayIcon, {}, void 0) }), void 0)) }), void 0)] }), void 0));
};
const Render = styled.div `
    position: relative;

    .Action-group {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        opacity: 0;
    }
    &:hover .Action-group {
        opacity: 1;
    }
`;
export const StyledButton = styled.div ``;
//# sourceMappingURL=XValueOrExpressionEditor.js.map