import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { FormDesignConstants, FormMode } from "../FormDesignConstants";
import { Draggable } from "react-beautiful-dnd";
import { OverlapDiv } from "../Containers/XBaseStackContainer";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
export class XContainerDesignWrapper extends React.Component {
    constructor(value) {
        super(value);
        this.innerComponentRef = null;
        this.onSelect = (event) => {
            event.preventDefault();
            this.props.innerComponent.selectInDesigner();
        };
        this.isNotRequiredOverlap = () => {
            return (!this.props.editContext
                || this.props.editContext.mode === FormMode.Runtime
                || this.props.editContext.mode === FormMode.FormDesign);
        };
        this.wrapped = value.innerComponent;
    }
    render() {
        if (this.isNotRequiredOverlap()) {
            return (_jsx("div", { children: this.props.innerComponent.render() }, void 0));
        }
        else {
            return (_jsx(Draggable, Object.assign({ draggableId: this.props.id, index: this.props.index }, { children: (provided) => {
                    return (_jsx("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { children: _jsxs("div", Object.assign({ "data-testid": this.props.innerComponent.id, ref: (ref) => this.innerComponentRef = ref, style: { position: 'relative' } }, { children: [_jsx(ObserveState, { listenTo: this.props.innerComponent, control: () => {
                                        return this.props.innerComponent.render();
                                    } }, void 0),
                                _jsx(OverlapDiv, { "data-test": "container-click-div", onClick: this.onSelect, selected: this.props.innerComponent.isDesignSelected(), border: `solid ${FormDesignConstants.SELECTED_CONTROL_BORDER_WIDTH} ${FormDesignConstants.SELECTED_CONTROL_BORDER_COLOR}` }, void 0)] }), void 0) }), void 0));
                } }), void 0));
        }
    }
}
//# sourceMappingURL=XContainerDesignWrapper.js.map