"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorMessageForSequence = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_draggable_1 = tslib_1.__importDefault(require("react-draggable"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const HTMLUtilities_1 = require("../../../CommonUI/HTMLUtilities");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const FlowEditContext_1 = require("../../FlowEditContext");
const FlowStepSequence_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequence");
const SequenceForErrorMessageDiv = styled_components_1.default.div `
    position: absolute;
    background: #fcfcfe;
    width: ${(props) => props.width}px;

    .MuiOutlinedInput-input {
        padding: 6px 12px;
        color: rgba(39, 41, 50, 0.7);
    }

    .MuiOutlinedInput-notchedOutline {
        border: 1px solid rgba(39, 41, 50, 0.2);
        box-sizing: border-box;
        border-radius: 4px;
    }
`;
const ErrorMessageForSequence = (props) => {
    function onUnSelectSequenceForErrorMessage() {
        props.editContext.selectedSequenceForError = null;
    }
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.SELECTED_SEQUENCE_FOR_ERROR], control: () => {
            if (!props.editContext.selectedSequenceForError) {
                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
            }
            let { sequence, position } = props.editContext.selectedSequenceForError;
            let pos = HTMLUtilities_1.HTMLUtilities.getGeometry(sequence._id);
            return ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: onUnSelectSequenceForErrorMessage, children: (0, jsx_runtime_1.jsx)(react_draggable_1.default, { defaultPosition: position, children: (0, jsx_runtime_1.jsx)(SequenceForErrorMessageDiv, { width: pos?.width || props.editContext.getSequenceWidth(sequence), children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: sequence, properties: [FlowStepSequence_1.FlowStepSequence.ERROR_MESSAGE], control: () => ((0, jsx_runtime_1.jsx)(core_1.TextField, { "data-testid": "sequence-strategy_set_errormessage", value: sequence.errorMessage, onChange: (event) => {
                                    sequence.errorMessage = event.target.value;
                                    StateManager_1.StateManager.propertyChanged(sequence, FlowStepSequence_1.FlowStepSequence.ERROR_MESSAGE);
                                }, variant: "outlined", fullWidth: true })) }) }) }) }));
        } }));
};
exports.ErrorMessageForSequence = ErrorMessageForSequence;
//# sourceMappingURL=XFlowEditor.ErrorMessageForSequence.js.map