import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickAwayListener, Typography } from "@material-ui/core";
import ReactDraggable from "react-draggable";
import styled from "styled-components";
import { ArrowDownIcon } from "../../CommonUI/Icon/ArrowDownIcon";
import { BranchIcon } from "../../CommonUI/Icon/BranchIcon";
import { CloseRedIcon } from "../../CommonUI/Icon/CloseRedIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { FlowStepSequenceStrategy } from "../Structure/FlowStepSequence";
const SequenceStrategyDialog = styled.div `
    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    border-radius: 4px;
    position: absolute;
    z-index: 10;

    display: flex;
    flex-direction: column;

    padding: 16px 16px 4px;

    .SequenceStrategyDialog-title {
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 140%;

        color: rgb(96, 104, 129, 0.5);

        margin-bottom: 12px;
    }
`;
const SequenceStrategyLineDiv = styled.div `
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;

    font-family: Inter;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 140%;

    cursor: pointer;

    color: #272932;

    &:hover {
        color: #4050a6;
    }
`;
export const SeqeuenceStrategyEditDialog = (props) => {
    function updateSequenceStrategy(sequence, strategy) {
        sequence.strategy = strategy;
        props.editContext.selectedSequenceStrategy = null;
    }
    return (_jsx(ObserveState, { listenTo: props.editContext, properties: ["selectedSequenceStrategy"], control: () => {
            if (!props.editContext.selectedSequenceStrategy) {
                return _jsx(_Fragment, {}, void 0);
            }
            let { sequence, position } = props.editContext.selectedSequenceStrategy;
            return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => (props.editContext.selectedSequenceStrategy = null) }, { children: _jsx(ReactDraggable, Object.assign({ handle: ".SequenceStrategyDialog-title", defaultPosition: position }, { children: _jsxs(SequenceStrategyDialog, Object.assign({ "data-testid": "sequence-strategy-dialog" }, { children: [_jsxs(Typography, Object.assign({ className: "SequenceStrategyDialog-title" }, { children: [sequence === null || sequence === void 0 ? void 0 : sequence.name, " Strategies"] }), void 0),
                            _jsxs(SequenceStrategyLineDiv, Object.assign({ onClick: () => updateSequenceStrategy(sequence, FlowStepSequenceStrategy.LINK), "data-testd": "sequence-strategy-branch" }, { children: [_jsx(BranchIcon, {}, void 0), " Link to sequence"] }), void 0),
                            _jsxs(SequenceStrategyLineDiv, Object.assign({ onClick: () => updateSequenceStrategy(sequence, FlowStepSequenceStrategy.ENDFLOW), "data-testd": "sequence-strategy-end_flow" }, { children: [_jsx(ArrowDownIcon, {}, void 0), " End flow"] }), void 0),
                            _jsxs(SequenceStrategyLineDiv, Object.assign({ onClick: () => updateSequenceStrategy(sequence, FlowStepSequenceStrategy.ENDFLOWINERROR), "data-testid": "sequence-strategy-end_flow_error" }, { children: [_jsx(CloseRedIcon, {}, void 0), " End flow in error"] }), void 0)] }), void 0) }), void 0) }), void 0));
        } }, void 0));
};
//# sourceMappingURL=XFlowEditor.SeqeuenceStrategyEditDialog.js.map