"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var dimensions_1 = require("@dojo/framework/core/middleware/dimensions");
var resize_1 = require("@dojo/framework/core/middleware/resize");
var theme_1 = require("../middleware/theme");
var bodyScroll_1 = require("../middleware/bodyScroll");
var vdom_1 = require("@dojo/framework/core/vdom");
var css = require("../theme/default/popup.m.css");
var fixedCss = require("./popup.m.css");
var factory = vdom_1.create({ dimensions: dimensions_1.dimensions, theme: theme_1.default, bodyScroll: bodyScroll_1.bodyScroll, resize: resize_1.resize })
    .properties()
    .children();
exports.Popup = factory(function Popup(_a) {
    var properties = _a.properties, children = _a.children, _b = _a.middleware, dimensions = _b.dimensions, theme = _b.theme, bodyScroll = _b.bodyScroll, resize = _b.resize;
    var _c = properties(), _d = _c.underlayVisible, underlayVisible = _d === void 0 ? false : _d, yBottom = _c.yBottom, yTop = _c.yTop, xRight = _c.xRight, xLeft = _c.xLeft, onClose = _c.onClose, open = _c.open;
    var _e = properties().position, position = _e === void 0 ? 'below' : _e;
    resize.get('wrapper');
    var wrapperDimensions = dimensions.get('wrapper');
    var bottomOfVisibleScreen = document.documentElement.scrollTop + document.documentElement.clientHeight;
    var topOfVisibleScreen = document.documentElement.scrollTop;
    var widthOfScreen = document.documentElement.clientWidth;
    var willFit = {
        below: yTop + wrapperDimensions.size.height <= bottomOfVisibleScreen,
        above: yBottom - wrapperDimensions.size.height >= topOfVisibleScreen,
        left: xLeft - wrapperDimensions.size.width >= 0,
        right: xRight + wrapperDimensions.size.width <= widthOfScreen
    };
    var wrapperStyles = {
        opacity: '0'
    };
    if (wrapperDimensions.size.height) {
        wrapperStyles = {
            left: xLeft + "px",
            opacity: '1'
        };
        if (position === 'below') {
            if (willFit.below) {
                wrapperStyles.top = yTop + "px";
            }
            else {
                wrapperStyles.top = yBottom - wrapperDimensions.size.height + "px";
            }
        }
        else if (position === 'above') {
            if (willFit.above) {
                wrapperStyles.top = yBottom - wrapperDimensions.size.height + "px";
            }
            else {
                wrapperStyles.top = yTop + "px";
            }
        }
        if (position === 'left' || position === 'right') {
            var triggerHeight = yTop - yBottom;
            wrapperStyles.top = Math.max(yBottom + triggerHeight / 2 - wrapperDimensions.size.height / 2, topOfVisibleScreen) + "px";
        }
        if (position === 'left') {
            if (willFit.left) {
                wrapperStyles.left = xLeft - wrapperDimensions.size.width + "px";
            }
            else {
                wrapperStyles.left = xRight + "px";
            }
        }
        else if (position === 'right') {
            if (willFit.right) {
                wrapperStyles.left = xRight + "px";
            }
            else {
                wrapperStyles.left = xLeft - wrapperDimensions.size.width + "px";
            }
        }
    }
    var classes = theme.classes(css);
    var _f = tslib_1.__read(children(), 1), content = _f[0];
    var contentResult = typeof content === 'function' ? content(position) : content;
    bodyScroll(!open);
    return (open && (vdom_1.tsx("body", null,
        vdom_1.tsx("div", { key: "underlay", classes: [
                theme.variant(),
                fixedCss.underlay,
                underlayVisible && classes.underlayVisible
            ], onclick: onClose }),
        vdom_1.tsx("div", { key: "wrapper", classes: [theme.variant(), fixedCss.root], styles: wrapperStyles }, contentResult))));
});
exports.default = exports.Popup;

/*# sourceMappingURL=index.js.map*/