"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MappingStepEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const FlowStepEditor_1 = require("../FlowStepEditor");
const react_1 = tslib_1.__importDefault(require("react"));
const StyledButton_1 = require("../../../CommonUI/BuildlingBlocks/StyledButton");
const UILayer_1 = require("../../../CommonUI/BuildlingBlocks/UILayer");
const MappingBuilder_1 = require("../../../Mapping/MappingBuilder");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const StepEditUI = ({ step }) => {
    const [open, setOpen] = react_1.default.useState(false);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: () => setOpen(true), children: ["Edit ", step.name || "Rule Step"] }), (0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: open, maxWidth: false, fullScreen: true, padding: "0px 0px", renderUI: () => ((0, jsx_runtime_1.jsx)(MappingBuilder_1.MappingBuilder, { definition: step.executable, mappingBuilderName: step.executable.title || step.name, onSave: () => {
                        setOpen(false);
                    }, onCancel: () => {
                        StateManager_1.StateManager.changed(step);
                        setOpen(false);
                    } })), onClose: () => setOpen(false) })] }));
};
class MappingStepEditor extends FlowStepEditor_1.FlowStepEditor {
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(StepEditUI, { step: this.stepData });
    }
}
exports.MappingStepEditor = MappingStepEditor;
//# sourceMappingURL=MappingStepEditor.js.map