"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepDescriptionIconDiv = exports.StepIconDiv = exports.StepConnectSummaryDiv = exports.StepConnector = exports.RenderStepHost = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FlowStepOutputInstructions_1 = require("@appglue/common/dist/Flow/Structure/FlowStepOutputInstructions");
const ObserveMultiState_1 = require("../../../CommonUI/StateManagement/ObserveMultiState");
const RenderStepPath_1 = require("./RenderStepPath");
const RenderStepInstruction_1 = require("./RenderStepInstruction");
const StepDescriptionIcon_1 = require("../../../CommonUI/Icon/StepDescriptionIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
const FlowUtilities_1 = require("@appglue/common/dist/Flow/Utilities/FlowUtilities");
const FlowStepSequenceType_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequenceType");
const material_1 = require("@mui/material");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const UILabel_1 = require("../../../CommonUI/BuildlingBlocks/UILabel");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
class RenderStepHost extends react_1.default.Component {
    element = null;
    componentDidUpdate() {
        if (this.props.editContext.draggingControl &&
            this.props.editContext.draggingControl.source.current === this.props.step._id &&
            this.element) {
            const el = this.element;
            const targetWidth = FlowConstants_1.FlowConstants.DRAGGING_STEP_WIDTH;
            const halfWidth = targetWidth / 2;
            const targetHeight = FlowConstants_1.FlowConstants.DRAGGING_STEP_HEIGHT;
            const halfHeight = targetHeight / 2;
            el.style.width = `${targetWidth}px`;
            el.style.height = `${targetHeight}px`;
            el.style.left = `${this.props.editContext.draggingControl.pos.x - halfWidth}px`;
            el.style.top = `${this.props.editContext.draggingControl.pos.y - halfHeight}px`;
        }
    }
    isShowStepConnection(step) {
        let sequence = step.sequence;
        if (!sequence)
            return false;
        let index = sequence.steps.indexOf(step);
        let isLast = sequence.steps.length <= index + 1;
        let otherPaths = step.getOutcomeInstructions();
        return !isLast || otherPaths.length !== 0;
    }
    render() {
        let { step, index } = this.props;
        let nextPathTitle = null;
        let nextPathTooltipTitle = null;
        let otherPaths = step.getOutcomeInstructions();
        let editContext = this.props.editContext;
        let stepui = editContext.getOrCreateStepEditor(step.__type, step);
        if (otherPaths.length !== 0) {
            // removes first item
            let defaultPath = otherPaths.splice(0, 1)[0];
            let continuePaths = otherPaths.filter((ins) => ins.strategy === FlowStepOutputInstructions_1.FlowStepOutputInstructionType.CONTINUE);
            nextPathTooltipTitle = [defaultPath, ...continuePaths].map((ins) => ins.pathName).join(" | ");
            nextPathTitle = continuePaths.length > 0 ? `${continuePaths.length + 1} Paths` : nextPathTooltipTitle;
        }
        return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: step._id, index: index, children: (provided, snapshot) => {
                return ((0, jsx_runtime_1.jsxs)("div", { onContextMenu: (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        this.props.editContext.contextControl = {
                            selectedId: step._id,
                            mouseX: e.clientX,
                            mouseY: e.clientY,
                        };
                    }, ref: (node) => {
                        provided.innerRef(node);
                        this.element = node;
                    }, ...provided.draggableProps, ...provided.dragHandleProps, style: {
                        ...(provided.draggableProps.style || {}),
                        cursor: snapshot.isDragging ? "move" : "default",
                    }, children: [!snapshot.isDragging &&
                            this.props.sequence.sequenceType !== FlowStepSequenceType_1.FlowStepSequenceType.BRANCH_MERGE &&
                            this.RenderNonBranchStep(stepui, editContext, step, nextPathTitle, nextPathTooltipTitle, otherPaths), !snapshot.isDragging &&
                            this.props.sequence.sequenceType === FlowStepSequenceType_1.FlowStepSequenceType.BRANCH_MERGE &&
                            this.RenderBranchStep(stepui, editContext, step, nextPathTitle, nextPathTooltipTitle, otherPaths), snapshot.isDragging && ((0, jsx_runtime_1.jsx)(material_1.Box, { padding: "5px", width: "200px", bgcolor: UIStyleConstants_1.UIStyleConstants.BLUE_VERY_LIGHT_COLOR, children: (0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { children: step.name || "" }) }))] }));
            } }, step._id));
    }
    RenderNonBranchStep(stepui, editContext, step, nextPathTitle, nextPathTooltipTitle, otherPaths) {
        let isSelected = editContext.selection === step._id;
        let isInvalid = stepui.getFlowStepData().getValidationIssues().length > 0;
        let borderColor = "transparent";
        if (isInvalid)
            borderColor = FlowConstants_1.FlowConstants.ERROR_STEP_COLOR;
        if (isSelected)
            borderColor = FlowConstants_1.FlowConstants.SELECTED_STEP_COLOR;
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                        const __ret = this.getStepColors(testcontext, step, borderColor);
                        let backgroundColor = __ret.backgroundColor;
                        borderColor = __ret.borderColor;
                        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { "data-testid": `step_${step._id}`, border: !FlowUtilities_1.FlowUtilities.IsEndStep(stepui.getFlowStepData()) ? "2px solid" : "0px", borderColor: borderColor, borderRadius: "4px", padding: "0px", fontSize: "12px", lineHeight: "24px", bgcolor: backgroundColor, color: "#272932", display: "flex", flexDirection: "column", position: "relative", onClick: (event) => {
                                event.stopPropagation();
                                editContext.setSelection(stepui.getFlowStepData());
                            }, children: [stepui.icon && (0, jsx_runtime_1.jsx)(exports.StepIconDiv, { children: stepui.icon }), step.description !== "" && ((0, jsx_runtime_1.jsx)(exports.StepDescriptionIconDiv, { children: (0, jsx_runtime_1.jsx)(StepDescriptionIcon_1.StepDescriptionIcon, {}) })), stepui.render(), otherPaths.length !== 0 && ((0, jsx_runtime_1.jsx)(RenderStepPath_1.StepConnectOtherPaths, { children: otherPaths.map((stepOutput) => {
                                        return ((0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [stepOutput], control: () => {
                                                return ((0, jsx_runtime_1.jsx)(exports.StepConnector, { id: stepOutput.strategy ===
                                                        FlowStepOutputInstructions_1.FlowStepOutputInstructionType.BRANCH
                                                        ? stepOutput.getElementId()
                                                        : undefined }));
                                            } }, "path" + stepOutput.pathName));
                                    }) }))] }));
                    } }), (0, jsx_runtime_1.jsx)(RenderStepPath_1.StepConnectSection, { children: this.isShowStepConnection(step) && ((0, jsx_runtime_1.jsx)(RenderStepPath_1.RenderStepPath, { step: step, title: nextPathTitle ? nextPathTitle : undefined, tooltipTitle: nextPathTooltipTitle ? nextPathTooltipTitle : undefined, renderUI: nextPathTitle ? () => this.renderStepSummary(editContext, step, otherPaths) : undefined, onTitleClick: (elem) => {
                            editContext.setSelectedStepStrategy(elem, step);
                        } })) })] }));
    }
    getStepColors(testcontext, step, borderColor) {
        let myContext = testcontext ? testcontext.findItem(step._id) : undefined;
        let backgroundColor = UIStyleConstants_1.UIStyleConstants.WHITE_COLOR;
        if (testcontext) {
            if (myContext) {
                if (myContext.isError) {
                    backgroundColor = UIStyleConstants_1.UIStyleConstants.RED_VERY_LIGHT_COLOR;
                    borderColor = UIStyleConstants_1.UIStyleConstants.RED_COLOR;
                }
                else {
                    backgroundColor = UIStyleConstants_1.UIStyleConstants.GREEN_VERY_LIGHT_COLOR;
                    borderColor = UIStyleConstants_1.UIStyleConstants.GREEN_COLOR;
                }
            }
            else {
                borderColor = "transparent";
            }
        }
        return { backgroundColor, borderColor };
    }
    RenderBranchStep(step, editContext, stepData, _nextPathTitle, _nextPathTooltipTitle, _otherPaths) {
        let isSelected = editContext.selection === step._id;
        let isInvalid = stepData.getValidationIssues().length > 0;
        let borderColor = "transparent";
        if (isInvalid)
            borderColor = FlowConstants_1.FlowConstants.ERROR_STEP_COLOR;
        if (isSelected)
            borderColor = FlowConstants_1.FlowConstants.SELECTED_STEP_COLOR;
        return ((0, jsx_runtime_1.jsx)(TestContext_1.TestContext.Consumer, { children: (testcontext) => {
                const __ret = this.getStepColors(testcontext, stepData, borderColor);
                let backgroundColor = __ret.backgroundColor;
                borderColor = __ret.borderColor;
                return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", minHeight: "57px", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { minWidth: "150px", display: "flex", flexDirection: "column", "data-testid": `step_${step._id}`, 
                            // selected={editContext.selection === step._id}
                            // invalid={step.getFlowStepData().getValidationIssues().length > 0}
                            onClick: (event) => {
                                event.stopPropagation();
                                editContext.setSelection(step.getFlowStepData());
                            }, 
                            //                hidden={FlowUtilities.IsEndStep(step.getFlowStepData())}
                            border: "2px", borderColor: borderColor, borderRadius: "4px", style: { borderStyle: "solid" }, bgcolor: backgroundColor, children: [step.icon && (0, jsx_runtime_1.jsx)(exports.StepIconDiv, { children: step.icon }), step.description !== "" && ((0, jsx_runtime_1.jsx)(exports.StepDescriptionIconDiv, { children: (0, jsx_runtime_1.jsx)(StepDescriptionIcon_1.StepDescriptionIcon, {}) })), step.render()] }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", width: "10px", height: "100%", alignSelf: "center", children: (0, jsx_runtime_1.jsx)(material_1.Box, { height: "1px", bgcolor: "black" }) })] }));
            } }));
    }
    renderStepSummary(editContext, step, otherPaths) {
        let paths = otherPaths.filter((ins) => ins.strategy !== FlowStepOutputInstructions_1.FlowStepOutputInstructionType.BRANCH);
        return ((0, jsx_runtime_1.jsx)(exports.StepConnectSummaryDiv, { children: paths.map((ins, idx) => ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: ins, control: () => ((0, jsx_runtime_1.jsx)(RenderStepInstruction_1.RenderStepInstruction, { editContext: editContext, step: step, instruction: ins }, idx)) }, idx))) }));
    }
}
exports.RenderStepHost = RenderStepHost;
exports.StepConnector = styled_components_1.default.div `
    min-width: 30px;
    min-height: 10px;
    position: relative;
`;
exports.StepConnectSummaryDiv = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: auto;
    padding: 6px 0;
    position: relative;
`;
exports.StepIconDiv = styled_components_1.default.div `
    position: absolute;
    top: 3px;
    right: 4px;
    width: 12px;
    opacity: 0.3;
    display: flex;

    img {
        width: 100%;
    }
`;
exports.StepDescriptionIconDiv = styled_components_1.default.div `
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
`;
//# sourceMappingURL=RenderStepHost.js.map