"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SeqeuenceStrategyEditDialog = 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 ArrowDownIcon_1 = require("../../../CommonUI/Icon/ArrowDownIcon");
const BranchIcon_1 = require("../../../CommonUI/Icon/BranchIcon");
const CloseRedIcon_1 = require("../../../CommonUI/Icon/CloseRedIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const FlowEditContext_1 = require("../../FlowEditContext");
const FlowSequenceCompleteStrategy_1 = require("@appglue/common/dist/Flow/Structure/FlowSequenceCompleteStrategy");
const SequenceStrategyDialog = styled_components_1.default.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-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 140%;

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

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

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

    cursor: pointer;

    color: #272932;

    &:hover {
        color: #4050a6;
    }
`;
const SeqeuenceStrategyEditDialog = (props) => {
    function updateSequenceStrategy(sequence, strategy) {
        sequence.strategy = strategy;
        props.editContext.selectedSequenceStrategy = null;
    }
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.SHOW_SEQUENCE_STRATEGY], control: () => {
            if (!props.editContext.selectedSequenceStrategy) {
                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
            }
            let { sequence, position } = props.editContext.selectedSequenceStrategy;
            return ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: () => (props.editContext.selectedSequenceStrategy = null), children: (0, jsx_runtime_1.jsx)(react_draggable_1.default, { handle: ".SequenceStrategyDialog-title", defaultPosition: position, children: (0, jsx_runtime_1.jsxs)(SequenceStrategyDialog, { "data-testid": "sequence-strategy-dialog", children: [(0, jsx_runtime_1.jsxs)(core_1.Typography, { className: "SequenceStrategyDialog-title", children: [sequence?.name, " Strategies"] }), (0, jsx_runtime_1.jsxs)(SequenceStrategyLineDiv, { onClick: () => updateSequenceStrategy(sequence, FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.LINK), "data-testd": "sequence-strategy-branch", children: [(0, jsx_runtime_1.jsx)(BranchIcon_1.BranchIcon, {}), " Link to sequence"] }), sequence.canReturn() && ((0, jsx_runtime_1.jsxs)(SequenceStrategyLineDiv, { onClick: () => updateSequenceStrategy(sequence, FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.RETURN_TO_CALLING_STEP), "data-testd": "sequence-strategy-continue", children: [(0, jsx_runtime_1.jsx)(BranchIcon_1.BranchIcon, {}), " Return"] })), (0, jsx_runtime_1.jsxs)(SequenceStrategyLineDiv, { onClick: () => updateSequenceStrategy(sequence, FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.END_FLOW), "data-testd": "sequence-strategy-end_flow", children: [(0, jsx_runtime_1.jsx)(ArrowDownIcon_1.ArrowDownIcon, {}), " End flow"] }), (0, jsx_runtime_1.jsxs)(SequenceStrategyLineDiv, { onClick: () => updateSequenceStrategy(sequence, FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.END_FLOW_IN_ERROR), "data-testid": "sequence-strategy-end_flow_error", children: [(0, jsx_runtime_1.jsx)(CloseRedIcon_1.CloseRedIcon, {}), " End flow in error"] })] }) }) }));
        } }));
};
exports.SeqeuenceStrategyEditDialog = SeqeuenceStrategyEditDialog;
//# sourceMappingURL=XFlowEditor.SeqeuenceStrategyEditDialog.js.map