import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import { KeyCodes, modalize } from '@uifabric-vue/utilities';
import { Vue } from 'vue-property-decorator';
function useScrollbar(style, root) {
    if (style && style.overflowY) {
        return false;
    }
    var needsVerticalScrollBar = false;
    if (root && root.firstElementChild) {
        var rootHeight = root.clientHeight;
        var firstChildHeight = root.firstElementChild.clientHeight;
        if (rootHeight > 0 && firstChildHeight > rootHeight) {
            needsVerticalScrollBar = firstChildHeight - rootHeight > 1;
        }
    }
    return needsVerticalScrollBar;
}
function useHideSiblingNodes(props, root) {
    var shouldHideSiblings = String(props['aria-modal']).toLowerCase() === 'true' && props.enableAriaHiddenSiblings;
    if (!(shouldHideSiblings && root)) {
        return;
    }
    var unmodalize = modalize(root);
    return unmodalize;
}
export var Popup = Vue.extend({
    functional: true,
    props: __assign(__assign({}, withThemeableProps()), { role: { type: String, default: undefined }, ariaLabel: { type: String, default: undefined }, ariaLabelledBy: { type: String, default: undefined }, ariaDescribedBy: { type: String, default: undefined }, propStyle: { type: Object, default: function () { } }, forwardRef: { type: HTMLDivElement, default: undefined } }),
    render: function (h, context) {
        var _a = context.props, role = _a.role, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, propStyle = _a.propStyle, forwardRef = _a.forwardRef;
        useHideSiblingNodes(context.props, forwardRef);
        // TODO useRestoreFocus
        var onKeyDown = function (ev) {
            var _a, _b;
            if (ev.which === KeyCodes.escape) {
                (_b = (_a = context.listeners).dismiss) === null || _b === void 0 ? void 0 : _b.call(_a, ev);
            }
        };
        // TODO useOnEvent
        var needsVerticalScrollBar = useScrollbar(propStyle, forwardRef);
        return h('div', __assign(__assign({}, context.data), { ref: context.data.ref, style: __assign({ overflowY: needsVerticalScrollBar ? 'scroll' : undefined, outline: 'none' }, propStyle), attrs: {
                role: role,
                ariaLabel: ariaLabel,
                ariaLabelledBy: ariaLabelledBy,
                ariaDescribedBy: ariaDescribedBy,
            }, on: {
                keydown: onKeyDown,
            } }), context.children);
    },
});
//# sourceMappingURL=Popup.js.map