"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderSequenceTitle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const InlineTextEdit_1 = require("../../../CommonUI/InlineTextEdit");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const BaseSequenceTitle_1 = require("../BaseSequenceTitle");
const CommonStyles_1 = require("../CommonStyles");
const FlowStepSequence_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequence");
const FlowSequenceStack_1 = require("../FlowSequenceStack");
class RenderSequenceTitle extends BaseSequenceTitle_1.BaseSequenceTitle {
    render() {
        const sequence = this.props.sequence;
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: sequence, properties: [FlowStepSequence_1.FlowStepSequence.NAME], control: () => ((0, jsx_runtime_1.jsx)(CommonStyles_1.TitleDiv, { className: "inline-editor", content: sequence.name, isCollapsed: sequence.isCollapsed, isNormal: sequence.isNormal, styles: FlowSequenceStack_1.FlowSequenceStack.getSequenceTitleStyle(sequence), children: (0, jsx_runtime_1.jsx)(InlineTextEdit_1.InlineTextEdit, { text: sequence.name || (sequence.isPrimary ? "Primary" : ""), placeholder: !sequence.isPrimary ? "unnamed" : "Primary", onEdit: (newValue) => this.onUpdateStackName(sequence, newValue), readOnly: !sequence.isNormal }) })) }));
    }
}
exports.RenderSequenceTitle = RenderSequenceTitle;
//# sourceMappingURL=RenderSequenceTitle.js.map