import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { ClickAwayListener, TextField } from '@material-ui/core';
import ReactDraggable from "react-draggable";
import styled from 'styled-components';
import { HTMLUtilities } from '../../CommonUI/HTMLUtilities';
import { ObserveState } from '../../CommonUI/StateManagement/ObserveState';
import { StateManager } from '../../CommonUI/StateManagement/StateManager';
const SequenceForErrorMessageDiv = styled.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;
    }
`;
export const ErrorMessageForSequence = (props) => {
    function onUnSelectSequenceForErrorMessage() {
        props.editContext.selectedSequenceForError = null;
    }
    return _jsx(ObserveState, { listenTo: props.editContext, properties: ["selectedSequenceForError"], control: () => {
            if (!props.editContext.selectedSequenceForError) {
                return _jsx(_Fragment, {}, void 0);
            }
            let { sequence, position } = props.editContext.selectedSequenceForError;
            let pos = HTMLUtilities.getGeometry(sequence._id);
            return _jsx(ClickAwayListener, Object.assign({ onClickAway: onUnSelectSequenceForErrorMessage }, { children: _jsx(ReactDraggable, Object.assign({ defaultPosition: position }, { children: _jsx(SequenceForErrorMessageDiv, Object.assign({ width: (pos === null || pos === void 0 ? void 0 : pos.width) || sequence.width }, { children: _jsx(ObserveState, { listenTo: sequence, properties: ['errorMessage'], control: () => _jsx(TextField, { "data-testid": "sequence-strategy_set_errormessage", value: sequence.errorMessage, onChange: (event) => {
                                    sequence.errorMessage = event.target.value;
                                    StateManager.propertyChanged(sequence, 'errorMessage');
                                }, variant: "outlined", fullWidth: true }, void 0) }, void 0) }), void 0) }), void 0) }), void 0);
        } }, void 0);
};
//# sourceMappingURL=XFlowEditor.ErrorMessageForSequence.js.map