"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderBranchSequenceContent = exports.RenderSequenceContent = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const RenderCollapsedStack_1 = require("./RenderCollapsedStack");
const RenderStepHost_1 = require("./RenderStepHost");
const material_1 = require("@mui/material");
const FlowSequenceContent = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: ${(props) => (props.height ? `${props.height}px` : "auto")};
`;
const FlowSequenceEmptyContent = styled_components_1.default.div `
    display: flex;
    margin: -4px -8px -2px;
    border: 1px dashed rgba(39, 41, 50, 0.2);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-size: ${(props) => props.styles.fontSize || 16}px;
    line-height: 20px;
    color: rgba(39, 41, 50, 0.3);
    flex: 1;
    font-weight: 600;
`;
const RenderSequenceContent = (props) => {
    let sequence = props.sequence;
    let editContext = props.editContext;
    let flow = props.flow;
    let sequenceSize = editContext.getSequenceMainSize(sequence);
    if (sequence.isCollapsed)
        return (0, jsx_runtime_1.jsx)(RenderCollapsedStack_1.RenderCollapsedStack, { sequence: sequence, editContext: editContext, flow: flow });
    else {
        return ((0, jsx_runtime_1.jsxs)(FlowSequenceContent, { height: sequenceSize.height, children: [sequence.steps.length === 0 && !editContext.isDragOver(sequence._id) && ((0, jsx_runtime_1.jsx)(FlowSequenceEmptyContent, { styles: {
                        fontSize: 16,
                    }, children: "Put steps here" })), sequence.steps.map((step, i) => {
                    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: step, control: () => ((0, jsx_runtime_1.jsx)(RenderStepHost_1.RenderStepHost, { editContext: editContext, sequence: sequence, index: i, step: step })) }, step._id));
                })] }));
    }
};
exports.RenderSequenceContent = RenderSequenceContent;
const RenderBranchSequenceContent = (props) => {
    let sequence = props.sequence;
    let editContext = props.editContext;
    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "row", minHeight: "60px", children: [props.steps.length === 0 && !editContext.isDragOver(sequence._id) && ((0, jsx_runtime_1.jsx)(FlowSequenceEmptyContent, { styles: {
                    fontSize: 16,
                }, children: "Put steps here" })), props.steps.map((step, i) => {
                return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: step, control: () => ((0, jsx_runtime_1.jsx)(RenderStepHost_1.RenderStepHost, { editContext: editContext, sequence: sequence, index: i, step: step })) }, step._id));
            })] }));
};
exports.RenderBranchSequenceContent = RenderBranchSequenceContent;
//# sourceMappingURL=RenderSequenceContent.js.map