"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlyoutRegion = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var menu_1 = require("./menu");
var component_1 = require("../api/registry/component");
var constants_1 = require("../constants");
/**
 * A FlyoutRegion component defines a region where flyout menus can be displayed
 *
 * @export
 * @class FlyoutRegion
 * @extends {React.Component<IFlyoutRegionProps, any>}
 */
var FlyoutRegion = function (props) {
    return React.createElement("div", null, (function () {
        var children = [];
        var _loop_1 = function (flyoutId) {
            var flyout = props.flyoutConf[flyoutId];
            var open_1 = !!flyout.open;
            if (open_1) {
                var items_1 = flyout.childItems || [];
                var containerStyle = {};
                containerStyle.zIndex = 2000; //This should be big enough to be above all possible UI elements
                if (flyout.metrics) {
                    var met = flyout.metrics;
                    if (flyoutId == constants_1.WEBLAYOUT_CONTEXTMENU) {
                        // TODO: Refine the layout positioning so that it better behaves like it did
                        // previously when the blueprint context menu worked (ie. If right-clicking near
                        // the bottom, the menu should be shown "above" the cursor)
                        containerStyle.top = met.posY - 40;
                        containerStyle.left = met.posX + 20;
                    }
                    else {
                        if (flyout.metrics.vertical === true) {
                            containerStyle.top = met.posY;
                        }
                        else {
                            containerStyle.top = met.posY + met.height;
                        }
                        if (flyoutId == constants_1.WEBLAYOUT_TASKMENU) {
                            containerStyle.right = window.innerWidth - (met.posX + met.width);
                        }
                        else {
                            containerStyle.left = met.posX;
                            if (flyout.metrics.vertical === true) {
                                containerStyle.left += met.width;
                            }
                        }
                    }
                }
                var invoked_1 = function () {
                    props.onCloseFlyout(flyoutId);
                };
                var className = "mg-flyout-menu-container";
                if (flyout.componentName) {
                    className = "mg-flyout-component-container";
                }
                children.push(React.createElement("div", { key: flyoutId, className: className, style: containerStyle },
                    (function () {
                        if (flyout.componentName) {
                            return React.createElement(component_1.PlaceholderComponent, { id: flyout.componentName, componentProps: flyout.componentProps, locale: props.locale });
                        }
                        else {
                            return React.createElement(menu_1.MenuComponent, { items: items_1, onInvoked: invoked_1 });
                        }
                    })(),
                    (function () {
                        if (flyoutId === constants_1.WEBLAYOUT_TASKMENU) {
                            //HACK: In order for this flyout to show properly over the task pane iframe
                            //when it contains embedded content (eg. An ActiveX/Flash/etc control) in IE
                            //we have to stick an iframe into this flyout
                            return React.createElement("iframe", { src: "about:blank", className: "iframe-iehack-zindex" });
                        }
                    })()));
            }
        };
        for (var flyoutId in props.flyoutConf) {
            _loop_1(flyoutId);
        }
        return children;
    })());
};
exports.FlyoutRegion = FlyoutRegion;
//# sourceMappingURL=flyout-region.js.map