import { __assign, __decorate, __extends, __metadata } from "tslib";
import { Component, Prop, Watch } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent';
import { Layer } from '../Layer';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Popup } from '../Popup';
import { Overlay } from '../Overlay';
import { Icon } from '../Icon';
import { ResponsiveMode } from '../../utilities';
import { DirectionalHint } from '../../common/DirectionalHint';
var getClassNames = classNamesFunction();
var DefaultLayerProps = {
    eventBubblingEnabled: false,
};
var ModalBase = /** @class */ (function (_super) {
    __extends(ModalBase, _super);
    function ModalBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.internalIsOpen = false;
        _this.isVisible = false;
        _this.isVisibleClose = false;
        _this.hasBeenOpened = false;
        _this.modalRectangleTop = 0;
        _this.isModalMenuOpen = false;
        _this.isInKeyboardMoveMode = false;
        _this.x = 0;
        _this.y = 0;
        _this.lastSetX = 0;
        _this.lastSetY = 0;
        _this.responsiveMode = ResponsiveMode.large;
        return _this;
    }
    ModalBase.prototype.onIsOpenChanged = function (newVal) {
        if (newVal)
            this.isVisible = true;
    };
    Object.defineProperty(ModalBase.prototype, "classNames", {
        get: function () {
            var _a = this, theme = _a.theme, styles = _a.styles, className = _a.className, layerProps = _a.layerProps, containerClassName = _a.containerClassName, scrollableContentClassName = _a.scrollableContentClassName, isVisible = _a.isVisible, hasBeenOpened = _a.hasBeenOpened, modalRectangleTop = _a.modalRectangleTop, topOffsetFixed = _a.topOffsetFixed, isModeless = _a.isModeless, dragOptions = _a.dragOptions, isOpen = _a.isOpen;
            var layerClassName = layerProps == null ? '' : layerProps.className;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                containerClassName: containerClassName,
                scrollableContentClassName: scrollableContentClassName,
                isOpen: isOpen,
                isVisible: isVisible,
                hasBeenOpened: hasBeenOpened,
                modalRectangleTop: modalRectangleTop,
                topOffsetFixed: topOffsetFixed,
                isModeless: isModeless,
                layerClassName: layerClassName,
                isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector,
            });
        },
        enumerable: false,
        configurable: true
    });
    ModalBase.prototype.onModalContextMenuClose = function () {
        this.isModalMenuOpen = false;
    };
    ModalBase.prototype.onModalClose = function () {
        this.isModalMenuOpen = false;
        this.isInKeyboardMoveMode = false;
        this.isOpen = false;
        // TODO
    };
    ModalBase.prototype.onEnterKeyboardMoveMode = function () {
        this.lastSetX = this.x;
        this.lastSetY = this.y;
        this.isInKeyboardMoveMode = true;
        this.isModalMenuOpen = true;
        // TODO
        // this._events.on(window, 'keydown', this._onKeyDown, true /* useCapture */);
    };
    ;
    ModalBase.prototype._onDragStart = function () {
        this.isModalMenuOpen = false;
        this.isInKeyboardMoveMode = false;
    };
    ;
    ModalBase.prototype._onDrag = function (_, ui) {
        this.x += ui.delta.x;
        this.y += ui.delta.y;
    };
    ;
    ModalBase.prototype._onDragStop = function () {
        // this.focus()
    };
    ;
    ModalBase.prototype.onDismiss = function (ev) {
        this.$emit('dismiss', ev);
    };
    ModalBase.prototype.render = function (h) {
        var _a = this, dragOptions = _a.dragOptions, isInKeyboardMoveMode = _a.isInKeyboardMoveMode, classNames = _a.classNames, isOpen = _a.isOpen, responsiveMode = _a.responsiveMode, isModeless = _a.isModeless, layerProps = _a.layerProps, isBlocking = _a.isBlocking, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, overlay = _a.overlay, ignoreExternalFocusing = _a.ignoreExternalFocusing, x = _a.x, y = _a.y;
        if (!isOpen)
            return null;
        var mergedLayerProps = __assign(__assign(__assign({}, DefaultLayerProps), this.layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount, insertFirst: isModeless, className: classNames.layer });
        var modalContent = h('div', { class: classNames.main }, [
            dragOptions && isInKeyboardMoveMode && h('div', {
                class: classNames.keyboardMoveIconContainer,
            }, [
                dragOptions.keyboardMoveIconProps
                    ? h(Icon, { attrs: dragOptions.keyboardMoveIconProps })
                    : h(Icon, { class: classNames.keyboardMoveIcon, attrs: { iconName: 'move' } }),
            ]),
            h('div', {
                ref: 'scrollableContent',
                class: classNames.scrollableContent,
                attrs: {
                    dataIsScrollable: true,
                },
            }, [
                dragOptions && this.isModalMenuOpen && h(dragOptions.menu, {
                    attrs: {
                        items: [
                            { key: 'move', text: dragOptions.moveMenuItemText, onClick: this.onEnterKeyboardMoveMode },
                            { key: 'close', text: dragOptions.closeMenuItemText, onClick: this.onModalClose },
                        ],
                        alignTargetEdge: true,
                        coverTarget: true,
                        directionalHint: DirectionalHint.topLeftEdge,
                        directionalHintFixed: true,
                        shouldFocusOnMount: true,
                        target: this.$refs.scrollableContent,
                    },
                    on: {
                        dismiss: this.onModalContextMenuClose,
                    },
                }),
                this.$slots.default,
            ]),
        ]);
        if (responsiveMode >= ResponsiveMode.small) {
            return h(Layer, { attrs: mergedLayerProps }, [
                h(Popup, {
                    attrs: {
                        role: isModeless || !isBlocking ? 'dialog' : 'alertdialog',
                        ariaModal: !isModeless,
                        ariaLabelledBy: titleAriaId,
                        ariaDescribedBy: subtitleAriaId,
                        shouldRestoreFocus: !ignoreExternalFocusing,
                    },
                    on: {
                        dismiss: onDismiss,
                    },
                }, [
                    h('div', { class: classNames.root }, [
                        !isModeless && h(Overlay, {
                            attrs: __assign({ dark: isDarkOverlay, allowTouchBodyScroll: this.allowTouchBodyScroll }, overlay),
                            on: __assign({}, !isBlocking ? { click: onDismiss } : {}),
                        }),
                        dragOptions
                            ? modalContent
                            : modalContent,
                    ]),
                ]),
            ]);
        }
    };
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "isOpen", void 0);
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "isDarkOverlay", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], ModalBase.prototype, "onDismissed", void 0);
    __decorate([
        Prop({ type: Object, default: null }),
        __metadata("design:type", Object)
    ], ModalBase.prototype, "layerProps", void 0);
    __decorate([
        Prop({ type: Object, default: null }),
        __metadata("design:type", Object)
    ], ModalBase.prototype, "overlay", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "isBlocking", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "isModeless", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], ModalBase.prototype, "className", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], ModalBase.prototype, "containerClassName", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], ModalBase.prototype, "scrollableContentClassName", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], ModalBase.prototype, "titleAriaId", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], ModalBase.prototype, "subtitleAriaId", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "topOffsetFixed", void 0);
    __decorate([
        Prop({ type: Object, default: null }),
        __metadata("design:type", Object)
    ], ModalBase.prototype, "dragOptions", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "allowTouchBodyScroll", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ModalBase.prototype, "ignoreExternalFocusing", void 0);
    __decorate([
        Watch('isOpen', { immediate: true }),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], ModalBase.prototype, "onIsOpenChanged", null);
    ModalBase = __decorate([
        Component
    ], ModalBase);
    return ModalBase;
}(BaseComponent));
export { ModalBase };
//# sourceMappingURL=Modal.base.js.map