import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { RegularCollapsedStack } from "../Regular/FlowCollapsedStack";
import { RegularStepHost } from "../Regular/StepHost";
const FlowSequenceContent = styled.div `
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: ${(props) => (props.height ? `${props.height}px` : "auto")};
`;
const FlowSequenceEmptyContent = styled.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;
`;
export const RegularSequenceContent = (props) => {
    let sequence = props.sequence;
    let editContext = props.editContext;
    let flow = props.flow;
    let sequenceSize = editContext.displayBehavior.getSequenceMainSize(sequence);
    if (editContext.displayBehavior.isCollapsed(sequence))
        return _jsx(RegularCollapsedStack, { sequence: sequence, editContext: editContext, flow: flow }, void 0);
    else {
        return (_jsxs(FlowSequenceContent, Object.assign({ height: sequenceSize.height }, { children: [sequence.steps.length === 0 && !sequence.isDragOver && (_jsx(FlowSequenceEmptyContent, Object.assign({ styles: editContext.displayBehavior.getEmptySequenceStyle(sequence) }, { children: "Put steps here" }), void 0)),
                sequence.steps.map((step, i) => {
                    return (_jsx(ObserveState, { listenTo: step, control: () => (_jsx(RegularStepHost, { editContext: sequence.editContext, sequence: sequence, index: i, step: step }, void 0)) }, step._id));
                })] }), void 0));
    }
};
//# sourceMappingURL=FlowStackContent.js.map