import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import Tooltip from "@material-ui/core/Tooltip";
import { FlowStepOutputInstructionType } from "../../Structure/FlowStepOutputInstructions";
import { FlowConstants } from "../../CommonUI/FlowConstants";
import { ErrorIcon } from "../../../CommonUI/Icon/ErrorIcon";
export const FlowSummaryDiv = styled.div `
	display: flex;
	flex-direction: row;
	align-items: center;
	${props => !props.notEndAlign && `justify-content: flex-end;`}
	cursor: pointer;
	position: relative;

	label {
		white-space: pre;
	}

	.step-path-name-error {
		font-family: Inter;
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 140%;
		color: ${FlowConstants.STEP_PATH_ERROR_COLOR};
		margin-left: 0px;

		text-transform: capitalize;

	}

	.step-path-error-message {
		display: flex;
		margin-left: 4px;
	}

	.step-path-name-end {
		font-family: Inter;
		font-style: normal;
		font-weight: 500;
		font-size: 10px;
		line-height: 140%;
		color: ${FlowConstants.STEP_PATH_END_COLOR};
		margin-left: 0px;
		text-transform: capitalize;
		cursor: pointer;
	}
`;
export const HorizontalStepInstruction = (props) => {
    const { instructions, type } = props;
    if (instructions.length === 0)
        return null;
    const step = props.step ? props.step : props.editContext.flow.find(instructions[0].stepId);
    const onClick = (event) => {
        if (step) {
            props.editContext.setSelectedStepStrategy(event.currentTarget, step);
        }
    };
    if (!step)
        return null;
    // let tooltipLabel = props.hiddenStepName && Reflect.get(step!, 'hidden') ? props.hiddenStepName : instructions[0].pathName;
    // let label = tooltipLabel;
    let tooltipLabel = instructions.map((ins) => ins.pathName || '').join(' | ');
    let label = instructions.length > 1 ? `${instructions.length} paths` : tooltipLabel;
    if (type === FlowStepOutputInstructionType.THROW_EXCEPTION) {
        return _jsx(Tooltip, Object.assign({ title: tooltipLabel }, { children: _jsxs(FlowSummaryDiv, Object.assign({ onClick: onClick, id: `${instructions[0].getElementId()}` }, { children: [_jsx("label", Object.assign({ className: "step-path-name-error" }, { children: label }), void 0),
                    _jsx(ErrorIcon, {}, void 0)] }), void 0) }), void 0);
    }
    if (instructions[0].strategy === FlowStepOutputInstructionType.END_FLOW) {
        return _jsx(Tooltip, Object.assign({ title: tooltipLabel }, { children: _jsx(FlowSummaryDiv, Object.assign({ onClick: onClick, id: `${instructions[0].getElementId()}` }, { children: _jsx("label", Object.assign({ className: "step-path-name-end" }, { children: label }), void 0) }), void 0) }), void 0);
    }
    return null;
};
//# sourceMappingURL=StepInstruction.js.map