"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlowDesignPage = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DockSidebar_1 = require("../../../CommonUI/BuilderUI/DockSidebar");
const CommonStyles_1 = require("../../../CommonUI/CommonStyles");
const CopyWhiteIcon_1 = require("../../../CommonUI/Icon/CopyWhiteIcon");
const CutWhiteIcon_1 = require("../../../CommonUI/Icon/CutWhiteIcon");
const DeleteWhiteIcon_1 = require("../../../CommonUI/Icon/DeleteWhiteIcon");
const ReactRenderHook_1 = require("../../../CommonUI/ReactRenderHook");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
const CandidateSequenceStack_1 = require("../CandidateSequenceStack");
const FlowEditContext_1 = require("../../FlowEditContext");
const FlowStepSequence_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequence");
const FlowConfiguration_1 = require("@appglue/common/dist/Flow/FlowConfiguration");
const XFlowEditor_EditLayer_1 = require("./XFlowEditor.EditLayer");
const XFlowEditor_ErrorMessageForSequence_1 = require("./XFlowEditor.ErrorMessageForSequence");
const XFlowEditor_SeqeuenceStrategyEditDialog_1 = require("./XFlowEditor.SeqeuenceStrategyEditDialog");
const XFlowEditor_StepStrategy_1 = require("./XFlowEditor.StepStrategy");
const XFlowEditor_Notification_1 = require("./XFlowEditor.Notification");
const DropdownIcon_1 = require("../../../CommonUI/Icon/DropdownIcon");
const XFlowEditor_ExtraConnection_1 = require("./XFlowEditor.ExtraConnection");
const ConnectionLine_1 = require("./ConnectionLine");
const ValidationInformation_1 = require("../../../Rule/DesignUI/ValidationInformation");
const FlowSequenceStack_1 = require("../FlowSequenceStack");
const DesignPanelWrapper = styled_components_1.default.div `
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
`;
const DesignPanel = styled_components_1.default.div `
    height: 100%;
    background: #f7f8fc;
    position: relative;
    overflow: auto;
`;
const InformationPanelDiv = styled_components_1.default.div `
    position: fixed;
    right: ${(props) => props.expandedWidth + 24}px;
    bottom: 24px;

    display: flex;
    align-items: flex-end;

    > * {
        margin-left: 12px;

        &:first-child {
            margin-left: 0;
        }
    }
`;
const FlowDesignPage = function (props) {
    function renderContextMenuUI() {
        let contextControl = props.editContext.contextControl;
        if (contextControl) {
            return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.ContextMenuForControl, { open: !!contextControl, onClose: () => (props.editContext.contextControl = null), anchorReference: "anchorPosition", anchorPosition: contextControl.mouseY !== null && contextControl.mouseX !== null
                    ? { top: contextControl.mouseY, left: contextControl.mouseX }
                    : undefined, children: [(0, jsx_runtime_1.jsxs)(core_1.MenuItem, { onClick: () => props.editContext.onCopy(contextControl.selectedId), "data-testid": "btn-context-copy", children: [(0, jsx_runtime_1.jsx)(CopyWhiteIcon_1.CopyWhiteIcon, {}), " Copy"] }), (0, jsx_runtime_1.jsxs)(core_1.MenuItem, { onClick: () => props.editContext.onCut(contextControl.selectedId), "data-testid": "btn-context-cut", children: [(0, jsx_runtime_1.jsx)(CutWhiteIcon_1.CutWhiteIcon, {}), " Cut"] }), (0, jsx_runtime_1.jsxs)(core_1.MenuItem, { onClick: () => props.editContext.onDelete(contextControl.selectedId), "data-testid": "btn-context-paste", children: [(0, jsx_runtime_1.jsx)(DeleteWhiteIcon_1.DeleteWhiteIcon, {}), " Delete"] })] }));
        }
    }
    const onClickDesigner = (event) => {
        // if there is any selected control or open panel is opened
        if (event.target === event.currentTarget && (!!props.editContext.selection || props.editContext.isShowEditor)) {
            props.editContext.clearSelection();
        }
    };
    const onScroll = (event) => {
        props.editContext.designerScrollTop = event.currentTarget.scrollTop;
    };
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.IS_SHOW_EDITOR, FlowEditContext_1.FlowEditContext.DESIGNER_SCROLL_TOP], control: () => ((0, jsx_runtime_1.jsx)(DockSidebar_1.DockedSidebar, { sidebarWidth: 350, sidebar: () => (0, jsx_runtime_1.jsx)(XFlowEditor_EditLayer_1.EditLayer, { flow: props.flow, editContext: props.editContext }), content: () => {
                return ((0, jsx_runtime_1.jsxs)(DesignPanelWrapper, { children: [(0, jsx_runtime_1.jsxs)(DesignPanel, { id: FlowConstants_1.FlowConstants.DESIGN_SURFACE_ID, onClick: onClickDesigner, onScroll: onScroll, children: [(0, jsx_runtime_1.jsx)(ReactRenderHook_1.ReactRenderHook, {}), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.CONNECTIONS_CHANGED, FlowStepSequence_1.FlowStepSequence.DRAG_OVER], control: () => {
                                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.editContext.getLines().map((line) => ((0, jsx_runtime_1.jsx)(ConnectionLine_1.ConnectionLine, { line: line, editContext: props.editContext, flow: props.flow }, `${line.value.fromId}-${line.value.toId}`))) }));
                                    } }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext.flow, properties: [FlowConfiguration_1.FlowConfiguration.CANDIDATE_SEQUENCES], control: () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.editContext
                                            .getCandidateSequences()
                                            .filter((s) => {
                                            // do not render on positioned
                                            return s.x !== -1 && s.y !== -1;
                                        })
                                            .map((c) => ((0, jsx_runtime_1.jsx)(CandidateSequenceStack_1.CandidateSequenceStack, { candidate: c, editContext: props.editContext }, c._id))) })) }), props.flow.sequences.map((sequence) => {
                                    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: sequence, properties: [
                                            FlowStepSequence_1.FlowStepSequence.STRATEGY,
                                            FlowStepSequence_1.FlowStepSequence.STEPS_CHANGED,
                                            FlowStepSequence_1.FlowStepSequence.COLOR,
                                            FlowStepSequence_1.FlowStepSequence.EXPANDING,
                                            FlowStepSequence_1.FlowStepSequence.DRAG_OVER,
                                        ], control: () => ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: sequence, control: () => {
                                                return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowStepSequence_1.FlowStepSequence.DRAG_OVER], control: () => ((0, jsx_runtime_1.jsx)(FlowSequenceStack_1.FlowSequenceStack, { sequence: sequence, editContext: props.editContext, flow: sequence.flow })) }));
                                            } })) }, sequence._id));
                                }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.CONTEXT_CONTROl], control: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderContextMenuUI() }) }), (0, jsx_runtime_1.jsx)(XFlowEditor_Notification_1.Notification, { editContext: props.editContext }), (0, jsx_runtime_1.jsx)(XFlowEditor_SeqeuenceStrategyEditDialog_1.SeqeuenceStrategyEditDialog, { editContext: props.editContext }), (0, jsx_runtime_1.jsx)(XFlowEditor_StepStrategy_1.StepStrategyEditDialog, { editContext: props.editContext }), (0, jsx_runtime_1.jsx)(XFlowEditor_ErrorMessageForSequence_1.ErrorMessageForSequence, { editContext: props.editContext }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.SHOW_ERROR_BRANCH, FlowStepSequence_1.FlowStepSequence.DRAG_OVER], control: () => ((0, jsx_runtime_1.jsxs)(InformationPanelDiv, { expandedWidth: props.editContext.isShowEditor ? 350 : 0, id: "information_div", children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.flow.errorSequence, control: () => ((0, jsx_runtime_1.jsx)(FlowSequenceStack_1.FlowSequenceStack, { sequence: props.flow.errorSequence, editContext: props.editContext, flow: props.flow })) }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.flow.endSequence, control: () => ((0, jsx_runtime_1.jsx)(FlowSequenceStack_1.FlowSequenceStack, { sequence: props.flow.endSequence, editContext: props.editContext, flow: props.flow })) })] })) })] }), (0, jsx_runtime_1.jsx)(XFlowEditor_ExtraConnection_1.FlowEditorExtraConnections, { editContext: props.editContext, flow: props.flow }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, control: () => (0, jsx_runtime_1.jsx)(ValidationInformation_1.ValidationInformation, { provider: props.flow }) })] }));
            }, open: props.editContext.isShowEditor, onClose: () => props.editContext.hideEditLayer, toogleIcon: () => ((0, jsx_runtime_1.jsxs)(CommonStyles_1.VerticalButton, { variant: "contained", onClick: () => props.editContext.toggleEditLayer(), endIcon: (0, jsx_runtime_1.jsx)(DropdownIcon_1.DropdownIcon, {}), open: props.editContext.isShowEditor, children: ["Edit: ", props.flow.find(props.editContext.selection || "")?.name || "Flow"] })) })) }));
};
exports.FlowDesignPage = FlowDesignPage;
//# sourceMappingURL=XFlowEditor.Designer.js.map