import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { MountingPortal } from 'portal-vue';
import Vue from 'vue';
import { getDefaultTarget, registerLayer, unregisterLayer } from './Layer.notification';
var getClassNames = classNamesFunction();
export var LayerBase = Vue.extend({
    name: 'LayerBase',
    props: __assign(__assign({}, withThemeableProps()), { hostId: { type: String, default: null } }),
    data: function () {
        return {
            marker: null,
            hasTarget: false,
        };
    },
    computed: {
        classNames: function () {
            var _a = this, className = _a.className, theme = _a.theme, styles = _a.styles;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                isNotHost: !this.hostId,
            });
        },
    },
    mounted: function () {
        this.createElement();
        if (this.hostId) {
            registerLayer(this.hostId, this.createElement);
        }
    },
    beforeDestroy: function () {
        if (this.hostId) {
            unregisterLayer(this.hostId, this.createElement);
        }
    },
    methods: {
        createElement: function () {
            var doc = this.$el.ownerDocument;
            var host = this.getHost();
            if (!doc || !host) {
                this.hasTarget = false;
                return;
            }
            this.hasTarget = true;
        },
        getHost: function () {
            var doc = this.$el.ownerDocument;
            if (!doc) {
                return undefined;
            }
            if (this.hostId) {
                return doc.getElementById(this.hostId);
            }
            else {
                var defaultHostSelector = getDefaultTarget();
                return defaultHostSelector
                    ? doc.querySelector(defaultHostSelector)
                    : doc.body;
            }
        },
    },
    render: function (h) {
        var _a, _b;
        // @ts-ignore
        if (!this.hasTarget)
            return;
        var _c = this, classNames = _c.classNames, hostId = _c.hostId;
        return h(MountingPortal, {
            props: {
                mountTo: hostId ? "#".concat(hostId) : 'body',
                append: true,
            },
        }, [
            h('div', { class: classNames.root }, [
                h('div', { class: classNames.content }, [
                    (_b = (_a = this.$scopedSlots).default) === null || _b === void 0 ? void 0 : _b.call(_a, {}),
                ]),
            ]),
        ]);
    },
});
//# sourceMappingURL=Layer.base.js.map