"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderCollapsedStack = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FlowStepOutputInstructions_1 = require("@appglue/common/dist/Flow/Structure/FlowStepOutputInstructions");
const RenderStepInstruction_1 = require("./RenderStepInstruction");
const FlowStepSequenceType_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequenceType");
const InstructionsDiv = styled_components_1.default.div `
    margin-left: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
`;
const FlowSequenceTitleDiv = styled_components_1.default.div `
    display: flex;
    align-items: center;

    cursor: default;

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

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

        &.MuiTypography-caption {
            font-style: normal;
            font-weight: bold;
            font-size: 8px;
            line-height: 140%;
        }
    }
`;
const FlowSequenceSummary = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    align-items: flex-start;
`;
const RenderCollapsedStack = (props) => {
    const Intructions = ((0, jsx_runtime_1.jsx)(InstructionsDiv, { children: props.sequence.instructions
            .filter((ins) => props.sequence.endStep._id !== ins.stepId &&
            ins.strategy !== FlowStepOutputInstructions_1.FlowStepOutputInstructionType.BRANCH &&
            ins.strategy !== FlowStepOutputInstructions_1.FlowStepOutputInstructionType.CONTINUE)
            .map((ins, idx) => ((0, jsx_runtime_1.jsx)(RenderStepInstruction_1.RenderStepInstruction, { editContext: props.editContext, instruction: ins, hideLabel: true }, idx))) }));
    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(FlowSequenceSummary, { children: [props.sequence.sequenceType === FlowStepSequenceType_1.FlowStepSequenceType.BRANCH_MERGE && ((0, jsx_runtime_1.jsxs)(FlowSequenceTitleDiv, { style: { paddingRight: "10px" }, children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { align: "center", variant: "h4", "data-testid": "steps-count", children: props.sequence.branches.length }), (0, jsx_runtime_1.jsx)(core_1.Typography, { align: "center", variant: "caption", children: "Branches" })] })), (0, jsx_runtime_1.jsxs)(FlowSequenceTitleDiv, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { align: "center", variant: "h4", "data-testid": "steps-count", children: props.sequence.allStepsWithoutEnd().length }), (0, jsx_runtime_1.jsx)(core_1.Typography, { align: "center", variant: "caption", children: "Steps" })] }), props.sequence.isNormal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Intructions })] }) }));
};
exports.RenderCollapsedStack = RenderCollapsedStack;
//# sourceMappingURL=RenderCollapsedStack.js.map