import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { Draggable } from "react-beautiful-dnd";
import styled from "styled-components";
import Xarrow from "react-xarrows";
import { FlowStepOutputInstructionType } from "../../Structure/FlowStepOutputInstructions";
import { ObserveMultiState } from "../../../CommonUI/StateManagement/ObserveMultiState";
import { StepDescriptionIcon } from "../../../CommonUI/Icon/StepDescriptionIcon";
import { ToolboxUIConstants } from "../../Components/ToolBox";
import { FlowConstants } from "../../CommonUI/FlowConstants";
import { DraggableItemDiv } from "../../DesignerUI/CommonStyles";
import { HorizontalStepInstruction } from "./StepInstruction";
import { StepStrategyPathLine } from "./StepStrategyPathLine";
export class HorizontalStepHost extends React.Component {
    constructor() {
        super(...arguments);
        this.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.DRAGGING_STEP_WIDTH;
            const halfWidth = targetWidth / 2;
            const targetHeight = 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`;
        }
    }
    render() {
        let { step, index, editContext, nextStep, sequence } = this.props;
        return (_jsx(Draggable, Object.assign({ draggableId: step._id, index: index }, { children: (provided, snapshot) => {
                return (_jsx("div", Object.assign({ 
                    // onContextMenu={(e: React.MouseEvent<HTMLDivElement>) => {
                    // 	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: Object.assign(Object.assign({}, (provided.draggableProps.style || {})), { cursor: snapshot.isDragging ? "move" : "default" }) }, { children: !snapshot.isDragging ? (this.renderStep(step, editContext, sequence, nextStep)) : (_jsxs(DraggableItemDiv, Object.assign({ style: { borderColor: ToolboxUIConstants.DRAGGING_COLOR }, isDragging: true }, { children: [step.icon, _jsx("span", { children: (step.name || "").slice(0, FlowConstants.MAX_CHARS_DRAGGING_STEP) }, void 0)] }), void 0)) }), void 0));
            } }), step._id));
    }
    renderStep(step, editContext, sequence, nextStep) {
        let otherPaths = step.getOutcomeInstructions();
        let paths = editContext.displayBehavior.getPathsForStep(step);
        let branchPaths = [];
        let extraPaths = [];
        paths.forEach((ins) => {
            if (ins.strategy === FlowStepOutputInstructionType.BRANCH) {
                branchPaths.push(ins);
            }
            else {
                extraPaths.push(ins);
            }
        });
        let nextPathTooltipTitle = null;
        if (otherPaths.length !== 0) {
            // removes first item
            let defaultPath = otherPaths.splice(0, 1)[0];
            let continuePaths = otherPaths.filter((ins) => ins.strategy === FlowStepOutputInstructionType.CONTINUE);
            nextPathTooltipTitle = [defaultPath, ...continuePaths].map((ins) => ins.pathName).join(" | ");
        }
        return (_jsxs(StepWrapper, { children: [_jsxs(StepSurround, Object.assign({ "data-testid": `step_${step._id}`, id: step._id, invalid: false, hidden: Reflect.get(step, "hidden"), setMinWidth: !nextStep && editContext.displayBehavior.isShowStepConnection(step) }, { children: [_jsxs(StepIconWrapperDiv, Object.assign({ selected: editContext.selection === step._id }, { children: [step.icon && (_jsx(StepIconDiv, Object.assign({ id: `step_${step._id}`, onClick: (event) => {
                                        event.stopPropagation();
                                        editContext.setSelection(step);
                                    } }, { children: step.icon }), void 0)),
                                step.description !== "" && (_jsx(StepDescriptionIconDiv, { children: _jsx(StepDescriptionIcon, {}, void 0) }, void 0)),
                                editContext.displayBehavior.isShowStepConnection(step) && (_jsx(Xarrow, { start: `step_${step._id}`, end: nextStep ? `step_${nextStep._id}` : `virtual_step_${sequence._id}`, color: FlowConstants.NEXT_STEP_PATH_COLOR, startAnchor: [
                                        {
                                            position: "right",
                                            offset: {
                                                rightness: 4,
                                            },
                                        },
                                    ], endAnchor: [
                                        {
                                            position: "left",
                                            offset: {
                                                rightness: -4,
                                            },
                                        },
                                    ], label: nextPathTooltipTitle ? (_jsx(HorizontalStepPathTitleDiv, Object.assign({ onClick: (event) => {
                                            editContext.setSelectedStepStrategy(event.currentTarget, step);
                                        }, className: "Step__path-title" }, { children: nextPathTooltipTitle }), void 0)) : undefined, strokeWidth: 2, headSize: 3, path: "straight", divContainerProps: {
                                        className: "Step__path_line",
                                    }, divContainerStyle: { zIndex: 2 } }, void 0))] }), void 0), step.render(), this.renderStepSummary(editContext, step, otherPaths), paths.length !== 0 && (_jsxs(StepConnectOtherPaths, { children: [branchPaths.map((stepOutput) => {
                                    return (_jsx(ObserveMultiState, { listenTo: [stepOutput], control: () => {
                                            return _jsx("div", { id: stepOutput.getElementId() }, void 0);
                                        } }, "path" + stepOutput.pathName));
                                }),
                                extraPaths.map((stepOutput) => {
                                    return (_jsx(ObserveMultiState, { listenTo: [stepOutput], control: () => {
                                            return _jsx(StepPathConnector, { id: `path_${stepOutput.getElementId()}` }, void 0);
                                        } }, "path" + stepOutput.pathName));
                                })] }, void 0))] }), void 0),
                editContext.displayBehavior.isShowStepConnection(step) && !nextStep && (_jsx(VirtualStepSurround, { id: `virtual_step_${sequence._id}` }, void 0))] }, void 0));
    }
    renderStepSummary(editContext, step, otherPaths) {
        let errorPaths = [];
        let endPaths = [];
        otherPaths.forEach((ins) => {
            if (ins.strategy === FlowStepOutputInstructionType.END_FLOW) {
                endPaths.push(ins);
            }
            else if (ins.strategy === FlowStepOutputInstructionType.THROW_EXCEPTION) {
                errorPaths.push(ins);
            }
        });
        return (_jsxs(StepConnectSummaryDiv, { children: [errorPaths.length ? (_jsx(ObserveMultiState, { listenTo: errorPaths, control: () => (_jsxs(_Fragment, { children: [_jsx(HorizontalStepInstruction, { instructions: errorPaths, type: FlowStepOutputInstructionType.THROW_EXCEPTION, editContext: editContext, step: step }, void 0),
                            _jsx(StepStrategyPathLine, { instruction: errorPaths[0] }, void 0)] }, void 0)) }, void 0)) : null,
                endPaths.length ? (_jsx(ObserveMultiState, { listenTo: endPaths, control: () => (_jsxs(_Fragment, { children: [_jsx(HorizontalStepInstruction, { instructions: endPaths, type: FlowStepOutputInstructionType.END_FLOW, editContext: editContext, step: step }, void 0),
                            _jsx(StepStrategyPathLine, { instruction: endPaths[0] }, void 0)] }, void 0)) }, void 0)) : null] }, void 0));
    }
}
export const StepSurround = styled("div") `
	${(props) => !props.hidden &&
    `
		border: 1px solid transparent;
	`}
	position: relative;
	font-size: 12px;
	line-height: 24px;
	color: #272932;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 4px;

	${(props) => props.setMinWidth && `min-width: 84px;`}

	.Step_root {
		display: flex;
		flex-direction: column;
		justify-content: center;

		max-width: 114px;

		.StepEdit {
			display: none;
		}

	}

	.InlineEdit {
		max-width: fit-content;
	}

	.InlineEdit-label {
		padding: 0;
		font-family: Inter;
		font-style: normal;
		font-size: 12px;
		line-height: 24px;
		max-width: 100%;
		border-bottom: none;
		display: flex;
		justify-content: center;
		text-align: center;
		color #272932;
	}

	.InlineEdit-label:hover {
		background: transparent;
		border-bottom: none;
	}

	.InlineEdit-input {
		z-index: 5;
		background: #fff;

		&.MuiInputBase-root {
			width: 100%;
			.MuiInputBase-input {
				border: none;
				border-bottom: 1px solid RGBA(39, 41, 50, 0.35);
				padding: 0;
				color: RGBA(39, 41, 50, 0.7);
	
				font-family: Inter;
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				line-height: 24px;
				width: 100%;
			}
		}
	}

	.Step__description {

		max-width: 100%;
		padding: 0;

		.MuiOutlinedInput-multiline {
			max-width: fit-content;
			padding: 0;
		}
	}
`;
export const VirtualStepSurround = styled.div `
    min-height: 56px;
    height: 56px;
    max-height: 56px;
    display: flex;
`;
export const StepPathConnector = styled.div `
    min-width: 10px;
    min-height: 2px;
    position: relative;
`;
export const StepConnectSummaryDiv = styled.div `
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 12px);
    left: 100%;
    align-items: flex-start;
`;
export const StepIconWrapperDiv = styled("div") `
    padding: 4px;
    border: solid 2px ${(props) => (props.selected ? FlowConstants.SELECTED_STEP_COLOR : "transparent")};
    border-radius: 7px;
    position: relative;
`;
export const StepIconDiv = styled.div `
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 4px;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .StepEdit {
        opacity: 0;
        position: absolute;
        top: 0;

        left: 50%;
        height: 42px;
        border-radius: 4px;

        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
    }

    &:hover .StepEdit {
        opacity: 1;
        background: #fff;
    }
`;
export const StepDescriptionIconDiv = styled.div `
    position: absolute;
    right: 5px;
    bottom: 5px;
`;
const HorizontalStepPathTitleDiv = styled.div `
    margin-top: -15px;
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;

    color: ${FlowConstants.NEXT_STEP_PATH_TITLE_COLOR};
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;

    opacity: 0;

    &:hover {
        color: #249169;
    }
`;
export const StepConnectOtherPaths = styled.div `
    flex-direction: row;
    display: flex;
`;
export const StepWrapper = styled.div `
    display: flex;
    height: 100%;

    svg {
        pointer-events: auto !important;
    }

    svg:hover ~ div > .Step__path-title,
    .Step__path-title:hover {
        opacity: 1;
        z-index: 5;
    }
`;
//# sourceMappingURL=StepHost.js.map