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 { RegularStepInstruction } from '../Regular/StepInstruction';
const InstructionsDiv = styled.div `
	margin-left: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
`;
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 `
	display: flex;
	flex-direction: row;
	align-items: flex-start;
`;
export const RegularCollapsedStack = (props) => {
    const Intructions = _jsx(InstructionsDiv, { children: props.sequence.instructions.filter((ins) => ins.strategy !== FlowStepOutputInstructionType.BRANCH && ins.strategy !== FlowStepOutputInstructionType.CONTINUE).map((ins, idx) => (_jsx(RegularStepInstruction, { editContext: props.editContext, instruction: ins, hideLabel: true }, idx))) }, void 0);
    return _jsx("div", { children: _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 && _jsx(_Fragment, { children: Intructions }, void 0)] }, void 0) }, void 0);
};
//# sourceMappingURL=FlowCollapsedStack.js.map