"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlowStepEditor = exports.ActionButton = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const BaseFlowStepEditor_1 = require("./BaseFlowStepEditor");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const StepNameLabel_1 = require("../Builder/Common/StepNameLabel");
const StepDescription_1 = require("../Builder/Common/StepDescription");
const EditGrayIcon_1 = require("../../CommonUI/Icon/EditGrayIcon");
const DeleteGrayIcon_1 = require("../../CommonUI/Icon/DeleteGrayIcon");
const DescriptionIcon_1 = require("../../CommonUI/Icon/DescriptionIcon");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const AppGlueError_1 = require("@appglue/common/dist/AppGlueError");
const material_1 = require("@mui/material");
exports.ActionButton = styled_components_1.default.div `
    cursor: pointer;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
`;
class FlowStepEditor extends BaseFlowStepEditor_1.BaseFlowStepEditor {
    _stepData;
    get stepData() {
        if (!this._stepData)
            throw new AppGlueError_1.AppGlueError("step data not set");
        return this._stepData;
    }
    set stepData(value) {
        this._stepData = value;
    }
    get isSelected() {
        return this.editContext.selection === this._id;
    }
    getFlowStepData() {
        return this.stepData;
    }
    onClick(event) {
        if (this.isSelected) {
            event.stopPropagation();
            this.editContext?.setSelection(this.stepData);
        }
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { width: "100%", display: "flex", flexDirection: "column", position: "relative", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(StepNameLabel_1.StepNameLabel, { step: this }), this.renderActionUI()] }), this.shouldShowDescription && (0, jsx_runtime_1.jsx)(StepDescription_1.StepDescription, { step: this })] }));
    }
    renderActionUI = () => {
        if (!this.isSelected)
            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { alignItems: "center", display: "flex", flexDirection: "row", paddingRight: "6px", children: [(0, jsx_runtime_1.jsx)(exports.ActionButton, { onClick: this.onClick, children: (0, jsx_runtime_1.jsx)(EditGrayIcon_1.EditGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(exports.ActionButton, { onClick: () => {
                        if (this.isSelected)
                            this.stepData.sequence?.removeStep(this.stepData);
                    }, children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(exports.ActionButton, { onClick: () => {
                        if (!this.isSelected)
                            return;
                        this.shouldShowDescription = !this.shouldShowDescription;
                        this.stepUpdate();
                    }, "data-testid": `${this._id}_toggle-description`, children: (0, jsx_runtime_1.jsx)(DescriptionIcon_1.DescriptionIcon, {}) })] }));
    };
    getStorageData() {
        return this.stepData.getStorageData();
    }
    setStorageData(data) {
        this.stepData.setStorageData(data);
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], FlowStepEditor.prototype, "onClick", null);
exports.FlowStepEditor = FlowStepEditor;
//# sourceMappingURL=FlowStepEditor.js.map