import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Draggable } from "react-beautiful-dnd";
import styled from "styled-components";
import { FlowStepOutputInstructionType } from "../../Structure/FlowStepOutputInstructions";
import { ObserveMultiState } from "../../../CommonUI/StateManagement/ObserveMultiState";
import { RegularStepPath, StepConnectOtherPaths, StepConnectSection } from "./StepPath";
import { RegularStepInstruction } from "./StepInstruction";
import { StepDescriptionIcon } from "../../../CommonUI/Icon/StepDescriptionIcon";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { ToolboxUIConstants } from "../../Components/ToolBox";
import { FlowConstants } from "../../CommonUI/FlowConstants";
import { DraggableItemDiv } from "../../DesignerUI/CommonStyles";
export class RegularStepHost 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 } = this.props;
        let nextPathTitle = null;
        let nextPathTooltipTitle = null;
        let otherPaths = step.getOutcomeInstructions();
        let editContext = this.props.editContext;
        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(" | ");
            nextPathTitle = continuePaths.length > 0 ? `${continuePaths.length + 1} Paths` : nextPathTooltipTitle;
        }
        return (_jsx(Draggable, Object.assign({ draggableId: step._id, index: index }, { children: (provided, snapshot) => {
                return (_jsx("div", Object.assign({ 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: Object.assign(Object.assign({}, (provided.draggableProps.style || {})), { cursor: snapshot.isDragging ? "move" : "default" }) }, { children: !snapshot.isDragging ? (_jsxs(_Fragment, { children: [this.renderStep(step, editContext), _jsx(StepConnectSection, { children: editContext.displayBehavior.isShowStepConnection(step) && (_jsx(RegularStepPath, { step: step, title: nextPathTitle ? nextPathTitle : undefined, tooltipTitle: nextPathTooltipTitle ? nextPathTooltipTitle : undefined, renderUI: nextPathTitle
                                        ? () => this.renderStepSummary(editContext, step, otherPaths)
                                        : undefined, onTitleClick: (elem) => {
                                        editContext.setSelectedStepStrategy(elem, step);
                                    } }, void 0)) }, void 0)] }, void 0)) : (_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) {
        let otherPaths = editContext.displayBehavior.getPathsForStep(step);
        return (_jsxs(StepSurround, Object.assign({ "data-testid": `step_${step._id}`, selected: editContext.selection === step._id, invalid: false, onClick: (event) => {
                event.stopPropagation();
                editContext.setSelection(step);
            }, hidden: Reflect.get(step, "hidden") }, { children: [step.icon && _jsx(StepIconDiv, { children: step.icon }, void 0),
                step.description !== "" && (_jsx(StepDescriptionIconDiv, { children: _jsx(StepDescriptionIcon, {}, void 0) }, void 0)), step.render(), otherPaths.length !== 0 && (_jsx(StepConnectOtherPaths, { children: otherPaths.map((stepOutput) => {
                        return (_jsx(ObserveMultiState, { listenTo: [stepOutput], control: () => {
                                return (_jsx(StepConnector, { id: stepOutput.strategy === FlowStepOutputInstructionType.BRANCH
                                        ? stepOutput.getElementId()
                                        : undefined }, void 0));
                            } }, "path" + stepOutput.pathName));
                    }) }, void 0))] }), void 0));
    }
    renderStepSummary(editContext, step, otherPaths) {
        let paths = otherPaths.filter((ins) => ins.strategy !== FlowStepOutputInstructionType.BRANCH);
        return (_jsx(StepConnectSummaryDiv, { children: paths.map((ins, idx) => (_jsx(ObserveState, { listenTo: ins, control: () => (_jsx(RegularStepInstruction, { editContext: editContext, step: step, instruction: ins }, idx)) }, idx))) }, void 0));
    }
}
export const StepSurround = styled("div") `
	${(props) => !props.hidden &&
    `
		border: 1px solid ${props.selected ? FlowConstants.SELECTED_STEP_COLOR : "transparent"};
	`}
	
	border-radius: 4px;
	background: #fff;
	padding: 0;
	font-size: 12px;
	line-height: 24px;
	color: #272932;
	display: flex;
	flex-direction: column;
	position: relative;

	.StepEdit {
		opacity: 0;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.Step_root {
		position: relative;
		display: flex;
	}

	.Step_root:hover .StepEdit {
		opacity: 1;
		background: #fff;
	}

	.InlineEdit-label {
		padding: 8px 16px;
		font-family: Inter;
		font-style: normal;
		font-size: 12px;
		line-height: 24px;
		max-width: 100%;
		border-bottom: none;
		display: flex;
		color #272932;
		&: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: 8px 16px;
				color: RGBA(39, 41, 50, 0.7);
	
				font-family: Inter;
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				line-height: 24px;
				width: 100%;
			}
		}
	}
`;
export const StepConnector = styled.div `
    min-width: 30px;
    min-height: 10px;
    position: relative;
`;
export const StepConnectSummaryDiv = styled.div `
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: auto;
    padding: 6px 0;
    position: relative;
`;
export const StepIconDiv = styled.div `
    position: absolute;
    top: 3px;
    right: 4px;
    width: 12px;
    opacity: 0.3;
    display: flex;

    img {
        width: 100%;
    }
`;
export const StepDescriptionIconDiv = styled.div `
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
`;
//# sourceMappingURL=StepHost.js.map