import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { MenuItem } from "@material-ui/core";
import React from "react";
import styled from "styled-components";
import { DockedSidebar } from "../../CommonUI/BuildUI/DockSidebar";
import { ContextMenuForControl, VerticalButton } from "../../CommonUI/CommonStyles";
import { CopyWhiteIcon } from "../../CommonUI/Icon/CopyWhiteIcon";
import { CutWhiteIcon } from "../../CommonUI/Icon/CutWhiteIcon";
import { DeleteWhiteIcon } from "../../CommonUI/Icon/DeleteWhiteIcon";
import { ReactRenderHook } from "../../CommonUI/ReactRenderHook";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { FlowConstants } from "../CommonUI/FlowConstants";
import { CandidateSequenceStack } from "../DesignerUI/CandidateSequenceStack";
import { EditLayer } from "./XFlowEditor.EditLayer";
import { ErrorMessageForSequence } from "./XFlowEditor.ErrorMessageForSequence";
import { SeqeuenceStrategyEditDialog } from "./XFlowEditor.SeqeuenceStrategyEditDialog";
import { StepStrategyEditDialog } from "./XFlowEditor.StepStrategy";
import { Notification } from "./XFlowEditor.Notification";
import { DropdownIcon } from "../../CommonUI/Icon/DropdownIcon";
import { FlowSequenceStack } from "../DesignerUI/FlowSequenceStack";
import { FlowEditorExtraConnections } from "./XFlowEditor.ExtraConnection";
import { ConnectionLine } from "./ConnectionLine";
const DesignPanelWrapper = styled.div `
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
`;
const DesignPanel = styled.div `
    height: 100%;
    background: #f7f8fc;
    position: relative;
    overflow: auto;
    font-family: Inter;
`;
const InformationPanelDiv = styled.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;
        }
    }
`;
export const FlowDesignPage = function (props) {
    function renderContextMenuUI() {
        let contextControl = props.editContext.contextControl;
        if (contextControl) {
            return (_jsxs(ContextMenuForControl, Object.assign({ open: !!contextControl, onClose: () => (props.editContext.contextControl = null), anchorReference: "anchorPosition", anchorPosition: contextControl.mouseY !== null && contextControl.mouseX !== null
                    ? { top: contextControl.mouseY, left: contextControl.mouseX }
                    : undefined }, { children: [_jsxs(MenuItem, Object.assign({ onClick: () => props.editContext.onCopy(contextControl.selectedId), "data-testid": "btn-context-copy" }, { children: [_jsx(CopyWhiteIcon, {}, void 0), " Copy"] }), void 0),
                    _jsxs(MenuItem, Object.assign({ onClick: () => props.editContext.onCut(contextControl.selectedId), "data-testid": "btn-context-cut" }, { children: [_jsx(CutWhiteIcon, {}, void 0), " Cut"] }), void 0),
                    _jsxs(MenuItem, Object.assign({ onClick: () => props.editContext.onDelete(contextControl.selectedId), "data-testid": "btn-context-paste" }, { children: [_jsx(DeleteWhiteIcon, {}, void 0), " Delete"] }), void 0)] }), void 0));
        }
    }
    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.displayBehavior.clearSelection();
        }
    };
    const onScroll = (event) => {
        props.editContext.designerScrollTop = event.currentTarget.scrollTop;
    };
    React.useEffect(() => {
        props.editContext.onContextInitialized();
    });
    return (_jsx(ObserveState, { listenTo: props.editContext, properties: ["isShowEditor", "designerScrollTop"], control: () => (_jsx(DockedSidebar, { sidebarWidth: 350, sidebar: () => _jsx(EditLayer, { flow: props.flow, editContext: props.editContext }, void 0), content: () => {
                return (_jsxs(DesignPanelWrapper, { children: [_jsxs(DesignPanel, Object.assign({ id: FlowConstants.DESIGN_SURFACE_ID, onClick: onClickDesigner, onScroll: onScroll }, { children: [_jsx(ReactRenderHook, {}, void 0),
                                _jsx(ObserveState, { listenTo: props.editContext, properties: ["connections", "draggingControl"], control: () => {
                                        return (_jsx(_Fragment, { children: props.editContext.displayBehavior.getLines().map((line) => (_jsx(ConnectionLine, { line: line, editContext: props.editContext, flow: props.flow }, `${line.value.fromId}-${line.value.toId}`))) }, void 0));
                                    } }, void 0),
                                _jsx(ObserveState, { listenTo: props.editContext, properties: ["candidateSequences"], control: () => (_jsx(_Fragment, { children: props.editContext
                                            .getCandidateSequences()
                                            .filter((s) => {
                                            // do not render on positioned
                                            return s.x !== -1 && s.y !== -1;
                                        })
                                            .map((c) => (_jsx(CandidateSequenceStack, { candidate: c, editContext: props.editContext }, c._id))) }, void 0)) }, void 0),
                                props.flow.sequences.map((sequence) => {
                                    return (_jsx(ObserveState, { listenTo: sequence, properties: ["steps", "color", "isCollapsed", "dragOverSequence"], control: () => (_jsx(ObserveState, { listenTo: sequence.editContext, properties: ["draggingControl"], control: () => (_jsx(FlowSequenceStack, { sequence: sequence, editContext: sequence.editContext, flow: sequence.flow }, void 0)) }, void 0)) }, sequence._id));
                                }), props.editContext.displayBehavior.renderExtraContents(props.editContext), _jsx(ObserveState, { listenTo: props.editContext, properties: ["contextControl"], control: () => _jsx(_Fragment, { children: renderContextMenuUI() }, void 0) }, void 0),
                                _jsx(Notification, { editContext: props.editContext }, void 0),
                                _jsx(SeqeuenceStrategyEditDialog, { editContext: props.editContext }, void 0),
                                _jsx(StepStrategyEditDialog, { editContext: props.editContext }, void 0),
                                _jsx(ErrorMessageForSequence, { editContext: props.editContext }, void 0),
                                _jsx(ObserveState, { listenTo: props.editContext, properties: ["isShowErrorBranch", "draggingControl"], control: () => (_jsxs(InformationPanelDiv, Object.assign({ expandedWidth: props.editContext.isShowEditor ? 350 : 0, id: "information_div" }, { children: [_jsx(ObserveState, { listenTo: props.flow.errorSequence, control: () => (_jsx(FlowSequenceStack, { sequence: props.flow.errorSequence, editContext: props.editContext, flow: props.flow }, void 0)) }, void 0),
                                            _jsx(ObserveState, { listenTo: props.flow.endSequence, control: () => (_jsx(FlowSequenceStack, { sequence: props.flow.endSequence, editContext: props.editContext, flow: props.flow }, void 0)) }, void 0)] }), void 0)) }, void 0)] }), void 0),
                        _jsx(FlowEditorExtraConnections, { editContext: props.editContext, flow: props.flow }, void 0)] }, void 0));
            }, open: props.editContext.isShowEditor, onClose: () => props.editContext.hideEditLayer, toogleIcon: () => {
                var _a;
                return (_jsxs(VerticalButton, Object.assign({ variant: "contained", onClick: () => props.editContext.toggleEditLayer(), endIcon: _jsx(DropdownIcon, {}, void 0), open: props.editContext.isShowEditor }, { children: ["Edit: ", ((_a = props.flow.find(props.editContext.selection || "")) === null || _a === void 0 ? void 0 : _a.name) || "Flow"] }), void 0));
            } }, void 0)) }, void 0));
};
//# sourceMappingURL=XFlowEditor.Designer.js.map