import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { EditLayerConfigArea, EditLayerStyledAccordion, EditLayerStyledAccordionSummary, EditLayerStyledTypography, EditLayerStyledAccordionDetails } from "../../CommonUI/CommonStyles";
import { ExpandIcon } from "../../CommonUI/Icon/ExpandIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
export const EditLayer = function (props) {
    const [expandedConfigPanel, setexpandedConfigPanel] = useState(true);
    function onToggleExpandedConfigPanel() {
        setexpandedConfigPanel(!expandedConfigPanel);
    }
    return (_jsx(ObserveState, { listenTo: props.editContext, properties: ["selectionElement"], control: () => {
            let selectedStep = props.editContext.selectionElement;
            let editUIComponent = props.editContext.displayBehavior.renderEditUI(selectedStep);
            return _jsx(_Fragment, { children: editUIComponent && (_jsx(EditLayerConfigArea, { children: _jsxs(EditLayerStyledAccordion, Object.assign({ expanded: expandedConfigPanel, onChange: onToggleExpandedConfigPanel, defaultExpanded: true }, { children: [_jsx(EditLayerStyledAccordionSummary, Object.assign({ expandIcon: _jsx(ExpandIcon, {}, void 0) }, { children: _jsx(EditLayerStyledTypography, Object.assign({ variant: "subtitle1", classes: { root: 'config-form-header' } }, { children: "Edit: 'Flow Step Config'" }), void 0) }), void 0),
                            _jsx(EditLayerStyledAccordionDetails, Object.assign({ classes: { root: 'config-form-content' } }, { children: _jsx(ObserveState, { listenTo: selectedStep, control: () => {
                                        return editUIComponent;
                                    } }, void 0) }), void 0)] }), void 0) }, void 0)) }, void 0);
        } }, void 0));
};
//# sourceMappingURL=XFlowEditor.EditLayer.js.map