"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XDesignWrapper = exports.XDraggableData = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const XBaseStackContainer_1 = require("../Containers/XBaseStackContainer");
const FormDesignConstants_1 = require("./FormDesignConstants");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const ExclamationRedIcon_1 = require("../../CommonUI/Icon/ExclamationRedIcon");
const WarningRedIcon_1 = require("../../CommonUI/Icon/WarningRedIcon");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const ErrorDiv = styled_components_1.default.div `
    position: absolute;
    top: 33px;
    right: 8px;
`;
const ErrorButton = styled_components_1.default.div `
    z-index: 101;
    cursor: pointer;
`;
const ValidationList = (0, styled_components_1.default)("div") `
    background: ${(props) => props.background || "#FFEEED"};
    border: solid 1px ${(props) => props.borderColor || "#F65C66"};
    border-radius: 3px;
    padding: 0 6px;
    width: 142px;
    height: 20px;
`;
const ValidationItem = styled_components_1.default.div `
    font-size: 12px;
    line-height: 11px;
    margin: 3px 0;
`;
class XDraggableData {
    id;
    index;
    innerComponent;
    editContext;
    constructor(id, index, innerComponent, editContext) {
        this.id = id;
        this.index = index;
        this.innerComponent = innerComponent;
        this.editContext = editContext;
    }
}
exports.XDraggableData = XDraggableData;
class XDesignWrapper extends react_1.default.Component {
    wrapped;
    innerComponentRef = null;
    constructor(value) {
        super(value);
        this.wrapped = value.innerComponent;
        this.state = {
            open: false,
        };
    }
    onSelect = (event) => {
        event.preventDefault();
        this.props.editContext.addToEventLog("Selected:" + this.props.innerComponent.id);
        this.props.innerComponent.selectInDesigner();
    };
    onContextMenu = (event) => {
        event.preventDefault();
        this.props.editContext.selectContextControl({
            selectedId: this.props.innerComponent.id,
            mouseX: event.clientX,
            mouseY: event.clientY,
        });
    };
    onClickValidationIcon = (event) => {
        event.preventDefault();
        event.stopPropagation();
        this.setState({ open: true });
    };
    isNotRequiredOverlap = () => {
        return (!this.props.editContext ||
            this.props.editContext.mode === FormDesignConstants_1.FormMode.Runtime ||
            this.props.editContext.mode === FormDesignConstants_1.FormMode.LayoutDesign);
    };
    render() {
        if (this.isNotRequiredOverlap()) {
            return this.props.innerComponent.render();
        }
        else {
            return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { isDragDisabled: this.props.editContext && this.props.editContext.mode !== FormDesignConstants_1.FormMode.FormDesign, 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.jsx)("div", { ref: (ref) => (this.innerComponentRef = ref), style: { position: "relative" }, "data-testid": "control-wrapper", children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.innerComponent, control: () => {
                                    return this.renderWrapper();
                                } }) }) }));
                } }, this.props.innerComponent.id));
        }
    }
    renderWrapper() {
        const validationIssues = this.props.editContext
            .getControlContext(this.props.innerComponent)
            .getDesignIssueData();
        let border = `solid ${FormDesignConstants_1.FormDesignConstants.SELECTED_CONTROL_BORDER_WIDTH} ${FormDesignConstants_1.FormDesignConstants.SELECTED_CONTROL_BORDER_COLOR}`;
        if (!this.props.innerComponent.isDesignSelected()) {
            if (validationIssues?.highestLevel === IDesignValidationProvider_1.ValidationLevel.ERROR) {
                border = `solid ${FormDesignConstants_1.FormDesignConstants.ERROR_CONTROL_BORDER_WIDTH} ${FormDesignConstants_1.FormDesignConstants.ERROR_CONTROL_BORDER_COLOR}`;
            }
            else if (validationIssues && validationIssues.highestLevel === IDesignValidationProvider_1.ValidationLevel.WARNING) {
                border = "none";
            }
        }
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.innerComponent.render(), (0, jsx_runtime_1.jsx)(XBaseStackContainer_1.OverlapDiv, { onContextMenu: this.onContextMenu, "data-testid": "control-click-div", onClick: this.onSelect, "aria-describedby": this.props.innerComponent.id, selected: this.props.innerComponent.isDesignSelected() ||
                        validationIssues?.highestLevel === IDesignValidationProvider_1.ValidationLevel.ERROR, border: border, children: validationIssues && ((0, jsx_runtime_1.jsxs)(ErrorDiv, { children: [(0, jsx_runtime_1.jsxs)(ErrorButton, { onClick: this.onClickValidationIcon, "data-testid": validationIssues?.highestLevel === IDesignValidationProvider_1.ValidationLevel.ERROR
                                    ? "control-error-validation"
                                    : "control-warn-validation", children: [validationIssues?.highestLevel === IDesignValidationProvider_1.ValidationLevel.ERROR && ((0, jsx_runtime_1.jsx)(ExclamationRedIcon_1.ExclamationRedIcon, { style: { width: "20px" } })), validationIssues?.highestLevel === IDesignValidationProvider_1.ValidationLevel.WARNING && (0, jsx_runtime_1.jsx)(WarningRedIcon_1.WarningRedIcon, {})] }), (0, jsx_runtime_1.jsx)(core_1.Popover, { anchorOrigin: { horizontal: 640, vertical: 70 }, open: this.state.open, onClose: () => this.setState({ open: false }), anchorEl: this.innerComponentRef, children: (0, jsx_runtime_1.jsx)(ValidationList, { borderColor: validationIssues?.highestLevel === IDesignValidationProvider_1.ValidationLevel.WARNING
                                        ? "#F69D5C"
                                        : undefined, children: (0, jsx_runtime_1.jsx)(ValidationItem, { "data-testid": "validation-item", children: validationIssues.text }) }) })] })) })] }));
    }
}
exports.XDesignWrapper = XDesignWrapper;
//# sourceMappingURL=XDesignWrapper.js.map