import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { Draggable } from "react-beautiful-dnd";
import styled from "styled-components";
import { Popover } from "@material-ui/core";
import { OverlapDiv } from "../Containers/XBaseStackContainer";
import { FormDesignConstants, FormMode } from "../FormDesignConstants";
import { ValidationLevel } from "../../Common/IDesignValidationProvider";
import { ExclamationRedIcon } from "../../CommonUI/Icon/ExclamationRedIcon";
import { WarningRedIcon } from "../../CommonUI/Icon/WarningRedIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
const ErrorDiv = styled.div `
    position: absolute;
    top: 33px;
    right: 8px;
`;
const ErrorButton = styled.div `
    z-index: 101;
    cursor: pointer;
`;
const ValidationList = styled("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.div `
    font-size: 12px;
    line-height: 11px;
    margin: 3px 0;
`;
export class XDraggableData {
    constructor(id, index, innerComponent, editContext) {
        this.id = id;
        this.index = index;
        this.innerComponent = innerComponent;
        this.editContext = editContext;
    }
}
export class XDesignWrapper extends React.Component {
    constructor(value) {
        super(value);
        this.innerComponentRef = null;
        this.onSelect = (event) => {
            event.preventDefault();
            this.props.editContext.addToEventLog("Selected:" + this.props.innerComponent.id);
            this.props.innerComponent.selectInDesigner();
        };
        this.onContextMenu = (event) => {
            event.preventDefault();
            this.props.editContext.selectContextControl({
                selectedId: this.props.innerComponent.id,
                mouseX: event.clientX,
                mouseY: event.clientY,
            });
        };
        this.onClickValidationIcon = (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.setState({ open: true });
        };
        this.isNotRequiredOverlap = () => {
            return (!this.props.editContext ||
                this.props.editContext.mode === FormMode.Runtime ||
                this.props.editContext.mode === FormMode.LayoutDesign);
        };
        this.wrapped = value.innerComponent;
        this.state = {
            open: false,
        };
    }
    render() {
        if (this.isNotRequiredOverlap()) {
            return this.props.innerComponent.render();
        }
        else {
            return (_jsx(Draggable, Object.assign({ isDragDisabled: this.props.editContext && this.props.editContext.mode !== FormMode.FormDesign, draggableId: this.props.id, index: this.props.index }, { children: (provided, snapshot) => {
                    return (_jsx("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { children: _jsx("div", Object.assign({ ref: (ref) => (this.innerComponentRef = ref), style: { position: "relative" }, "data-testid": "control-wrapper" }, { children: _jsx(ObserveState, { listenTo: this.props.innerComponent, control: () => {
                                    return this.renderWrapper();
                                } }, void 0) }), void 0) }), void 0));
                } }), this.props.innerComponent.id));
        }
    }
    renderWrapper() {
        const validationIssues = this.props.editContext
            .getControlContext(this.props.innerComponent)
            .getDesignIssueData();
        let border = `solid ${FormDesignConstants.SELECTED_CONTROL_BORDER_WIDTH} ${FormDesignConstants.SELECTED_CONTROL_BORDER_COLOR}`;
        if (!this.props.innerComponent.isDesignSelected()) {
            if ((validationIssues === null || validationIssues === void 0 ? void 0 : validationIssues.highestLevel) === ValidationLevel.ERROR) {
                border = `solid ${FormDesignConstants.ERROR_CONTROL_BORDER_WIDTH} ${FormDesignConstants.ERROR_CONTROL_BORDER_COLOR}`;
            }
            else if (validationIssues && validationIssues.highestLevel === ValidationLevel.WARNING) {
                border = "none";
            }
        }
        return (_jsxs(_Fragment, { children: [this.props.innerComponent.render(), _jsx(OverlapDiv, Object.assign({ onContextMenu: this.onContextMenu, "data-testid": "control-click-div", onClick: this.onSelect, "aria-describedby": this.props.innerComponent.id, selected: this.props.innerComponent.isDesignSelected() ||
                        (validationIssues === null || validationIssues === void 0 ? void 0 : validationIssues.highestLevel) === ValidationLevel.ERROR, border: border }, { children: validationIssues && (_jsxs(ErrorDiv, { children: [_jsxs(ErrorButton, Object.assign({ onClick: this.onClickValidationIcon, "data-testid": (validationIssues === null || validationIssues === void 0 ? void 0 : validationIssues.highestLevel) === ValidationLevel.ERROR
                                    ? "control-error-validation"
                                    : "control-warn-validation" }, { children: [(validationIssues === null || validationIssues === void 0 ? void 0 : validationIssues.highestLevel) === ValidationLevel.ERROR && (_jsx(ExclamationRedIcon, { style: { width: "20px" } }, void 0)),
                                    (validationIssues === null || validationIssues === void 0 ? void 0 : validationIssues.highestLevel) === ValidationLevel.WARNING && (_jsx(WarningRedIcon, {}, void 0))] }), void 0),
                            _jsx(Popover, Object.assign({ anchorOrigin: { horizontal: 640, vertical: 70 }, open: this.state.open, onClose: () => this.setState({ open: false }), anchorEl: this.innerComponentRef }, { children: _jsx(ValidationList, Object.assign({ borderColor: (validationIssues === null || validationIssues === void 0 ? void 0 : validationIssues.highestLevel) === ValidationLevel.WARNING
                                        ? "#F69D5C"
                                        : undefined }, { children: _jsx(ValidationItem, Object.assign({ "data-testid": "validation-item" }, { children: validationIssues.text }), void 0) }), void 0) }), void 0)] }, void 0)) }), void 0)] }, void 0));
    }
}
//# sourceMappingURL=XDesignWrapper.js.map