"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RndModalDialog = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var core_1 = require("@blueprintjs/core");
var react_rnd_1 = require("react-rnd");
var i18n_1 = require("../api/i18n");
var DIAG_HEADER_HEIGHT = 40;
var RndModalDialog = function (props) {
    if (props.isOpen === false)
        return React.createElement("div", null);
    var modalBodyStyle = {
        margin: 0
    };
    if (!props.disableYOverflow) {
        modalBodyStyle.overflowY = "auto";
    }
    var _a = React.useState(false), isDragging = _a[0], setIsDragging = _a[1];
    var _b = React.useState(false), isResizing = _b[0], setIsResizing = _b[1];
    var _c = React.useState(props.width), diagWidth = _c[0], setDiagWidth = _c[1];
    var _d = React.useState(props.height), diagHeight = _d[0], setDiagHeight = _d[1];
    var _e = React.useState(props.x), diagX = _e[0], setDiagX = _e[1];
    var _f = React.useState(props.y), diagY = _f[0], setDiagY = _f[1];
    var ZINDEX = {
        zIndex: 1980 //So flyouts will appear above it
    };
    var modalStyle = tslib_1.__assign({ width: diagWidth, height: diagHeight, 
        //bp defaults this to 30, which invisibly offsets the 
        //position of expected rnd drag/resize handles
        marginTop: 0 }, ZINDEX);
    var rndStyle = tslib_1.__assign({}, ZINDEX);
    var diagSize = [diagWidth, diagHeight - DIAG_HEADER_HEIGHT];
    //console.log(`Resizing: ${isResizing}, Dragging: ${isDragging}`);
    return React.createElement(react_rnd_1.Rnd, { style: rndStyle, enableResizing: {
            bottomRight: true,
            bottomLeft: true,
            topLeft: true,
            topRight: true
        }, enableUserSelectHack: false, onDragStart: function () { return setIsDragging(true); }, onDragStop: function (e, d) {
            var _a;
            setDiagX(d.x);
            setDiagY(d.y);
            setIsDragging(false);
            var args = {
                x: d.x,
                y: d.y,
                width: diagWidth,
                height: diagHeight
            };
            //console.log("Modal Change", args);
            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, args);
        }, onResizeStart: function () { return setIsResizing(true); }, onResize: function (e, direction, ref, delta, position) {
            setDiagWidth(ref.offsetWidth);
            setDiagHeight(ref.offsetHeight);
            setDiagX(position.x);
            setDiagY(position.y);
        }, onResizeStop: function (e, direction, ref, delta, position) {
            var _a;
            setDiagWidth(ref.offsetWidth);
            setDiagHeight(ref.offsetHeight);
            setDiagX(position.x);
            setDiagY(position.y);
            setIsResizing(false);
            var args = {
                x: position.x,
                y: position.y,
                width: ref.offsetWidth,
                height: ref.offsetHeight
            };
            //console.log("Modal Change", args);
            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, args);
        }, dragHandleClassName: "bp3-heading", default: { x: props.x, y: props.y, width: props.width, height: props.height } },
        React.createElement("div", { className: "bp3-dialog-container" },
            React.createElement("div", { className: "bp3-dialog", style: modalStyle },
                React.createElement("div", { className: "bp3-dialog-header noselect" },
                    props.icon && React.createElement(core_1.Icon, { icon: props.icon }),
                    React.createElement("h4", { className: "bp3-heading" }, props.title),
                    React.createElement(core_1.Button, { onClick: props.onClose, "aria-label": "Close", className: "bp3-dialog-close-button bp3-button", minimal: true, icon: "small-cross" })),
                React.createElement("div", { className: "bp3-dialog-body", style: modalBodyStyle }, (function () {
                    //We use NonIdealState as a visual mask to suppress unwanted mouse 
                    //interaction during the act of dragging/resizing, similar to what the
                    //Task Pane does
                    if (props.enableInteractionMask && (isResizing || isDragging)) {
                        var key = isResizing ? "WINDOW_RESIZING" : "WINDOW_MOVING";
                        return React.createElement(core_1.NonIdealState, { icon: "arrows-horizontal", description: (0, i18n_1.tr)(key, props.locale) });
                    }
                    else {
                        return props.children(diagSize);
                    }
                })()))));
};
exports.RndModalDialog = RndModalDialog;
//# sourceMappingURL=modal-dialog.js.map