"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XContainerDesignWrapper = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const FormDesignConstants_1 = require("./FormDesignConstants");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const XBaseStackContainer_1 = require("../Containers/XBaseStackContainer");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
class XContainerDesignWrapper extends react_1.default.Component {
    wrapped;
    innerComponentRef = null;
    constructor(value) {
        super(value);
        this.wrapped = value.innerComponent;
    }
    onSelect = (event) => {
        event.preventDefault();
        this.props.innerComponent.selectInDesigner();
    };
    isNotRequiredOverlap = () => {
        return (!this.props.editContext ||
            this.props.editContext.mode === FormDesignConstants_1.FormMode.Runtime ||
            this.props.editContext.mode === FormDesignConstants_1.FormMode.FormDesign);
    };
    render() {
        if (this.isNotRequiredOverlap()) {
            return (0, jsx_runtime_1.jsx)("div", { children: this.props.innerComponent.render() });
        }
        else {
            return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: this.props.id, index: this.props.index, children: (provided) => {
                    return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, children: (0, jsx_runtime_1.jsxs)("div", { "data-testid": this.props.innerComponent.id, ref: (ref) => (this.innerComponentRef = ref), style: { position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.innerComponent, control: () => {
                                        return this.props.innerComponent.render();
                                    } }), (0, jsx_runtime_1.jsx)(XBaseStackContainer_1.OverlapDiv, { "data-test": "container-click-div", onClick: this.onSelect, selected: this.props.innerComponent.isDesignSelected(), border: `solid ${FormDesignConstants_1.FormDesignConstants.SELECTED_CONTROL_BORDER_WIDTH} ${FormDesignConstants_1.FormDesignConstants.SELECTED_CONTROL_BORDER_COLOR}` })] }) }));
                } }));
        }
    }
}
exports.XContainerDesignWrapper = XContainerDesignWrapper;
//# sourceMappingURL=XContainerDesignWrapper.js.map