import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Typography } from '@material-ui/core';
import styled from 'styled-components';
import { FlowStepOutputInstructionType } from '../../Structure/FlowStepOutputInstructions';
import { StepPathConnector, StepConnectOtherPaths } from './StepHost';
import { HorizontalStepInstruction } from './StepInstruction';
import { StepStrategyPathLine } from './StepStrategyPathLine';
const InstructionsDiv = styled.div `
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    position: absolute;
    top: calc(100% + 10px);
    left: calc(50% + 40px);
`;
const FlowSequenceTitleDiv = styled.div `
    display: flex;
    align-items: center;

    cursor: default;

	.MuiTypography-root {
		color: rgba(39, 41, 50, 0.4);

		&.MuiTypography-h4 {
			font-family: Inter;
			font-style: normal;
			font-weight: bold;
			font-size: 24px;
			line-height: 120%;
			margin-right: 5px;
		}

		&.MuiTypography-caption {
			font-family: Inter;
			font-style: normal;
			font-weight: bold;
			font-size: 8px;
			line-height: 140%;
		}

	}
`;
const FlowSequenceSummary = styled.div `
	position: relative;
`;
export const HorizontalCollapsedStack = (props) => {
    let errorPaths = [];
    let endPaths = [];
    props.sequence.instructions.forEach((ins) => {
        if (ins.strategy === FlowStepOutputInstructionType.END_FLOW) {
            endPaths.push(ins);
        }
        else if (ins.strategy === FlowStepOutputInstructionType.THROW_EXCEPTION) {
            errorPaths.push(ins);
        }
    });
    return _jsxs(FlowSequenceSummary, { children: [_jsxs(FlowSequenceTitleDiv, { children: [_jsx(Typography, Object.assign({ align: "center", variant: "h4", "data-testid": "steps-count" }, { children: props.sequence.steps.length }), void 0),
                    _jsx(Typography, Object.assign({ align: "center", variant: "caption" }, { children: "Steps" }), void 0)] }, void 0),
            props.sequence.isNormal && _jsxs(_Fragment, { children: [_jsxs(InstructionsDiv, { children: [errorPaths.length
                                ? _jsxs(_Fragment, { children: [_jsx(HorizontalStepInstruction, { instructions: errorPaths, type: FlowStepOutputInstructionType.THROW_EXCEPTION, editContext: props.editContext }, void 0),
                                        _jsx(StepStrategyPathLine, { instruction: errorPaths[0] }, void 0)] }, void 0)
                                : null,
                            endPaths.length
                                ? _jsxs(_Fragment, { children: [_jsx(HorizontalStepInstruction, { instructions: endPaths, type: FlowStepOutputInstructionType.END_FLOW, editContext: props.editContext }, void 0),
                                        _jsx(StepStrategyPathLine, { instruction: endPaths[0] }, void 0)] }, void 0)
                                : null] }, void 0),
                    _jsxs(StepConnectOtherPaths, { children: [errorPaths.length ? _jsx(StepPathConnector, { id: `path_${errorPaths[0].getElementId()}` }, void 0) : null,
                            endPaths.length ? _jsx(StepPathConnector, { id: `path_${endPaths[0].getElementId()}` }, void 0) : null] }, void 0)] }, void 0)] }, void 0);
};
//# sourceMappingURL=FlowCollapsedStack.js.map