"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditLayer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CommonStyles_1 = require("../../../CommonUI/CommonStyles");
const ExpandIcon_1 = require("../../../CommonUI/Icon/ExpandIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const FlowEditContext_1 = require("../../FlowEditContext");
const FlowConfiguration_1 = require("@appglue/common/dist/Flow/FlowConfiguration");
const FlowStepSequence_1 = require("@appglue/common/dist/Flow/Structure/FlowStepSequence");
const EditLayer = function (props) {
    const [expandedConfigPanel, setexpandedConfigPanel] = (0, react_1.useState)(true);
    function onToggleExpandedConfigPanel() {
        setexpandedConfigPanel(!expandedConfigPanel);
    }
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, properties: [FlowEditContext_1.FlowEditContext.SELECTION_ELEMENT], control: () => {
            let selectedStep = props.editContext.selectionElement;
            let title = "Edit";
            if (selectedStep) {
                title = "Edit (Step)";
                if (selectedStep instanceof FlowStepSequence_1.FlowStepSequence)
                    title = "Edit (Sequence)";
                if (selectedStep instanceof FlowConfiguration_1.FlowConfiguration)
                    title = "Edit (Flow Settings)";
                let name = Reflect.get(selectedStep, "name");
                if (name) {
                    title = title + ": " + name;
                }
            }
            let editUIComponent = props.editContext.renderEditUI(props.editContext, selectedStep);
            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: editUIComponent && ((0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerConfigArea, { children: (0, jsx_runtime_1.jsxs)(CommonStyles_1.EditLayerStyledAccordion, { expanded: expandedConfigPanel, onChange: onToggleExpandedConfigPanel, defaultExpanded: true, children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledAccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(ExpandIcon_1.ExpandIcon, {}), children: (0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledTypography, { variant: "subtitle1", classes: { root: "config-form-header" }, children: title }) }), (0, jsx_runtime_1.jsx)(CommonStyles_1.EditLayerStyledAccordionDetails, { classes: { root: "config-form-content" }, children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: selectedStep, control: () => {
                                        return editUIComponent;
                                    } }) })] }) })) }));
        } }));
};
exports.EditLayer = EditLayer;
//# sourceMappingURL=XFlowEditor.EditLayer.js.map