import { __decorate, __extends, __metadata } from "tslib";
import { Prop, Component } from 'vue-property-decorator';
import { css, Async, EventGroup } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { getTheme, registerOnThemeChangeCallback } from '@uifabric/styling';
// @ts-ignore
var BaseComponent = /** @class */ (function (_super) {
    __extends(BaseComponent, _super);
    function BaseComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.componentRef = null;
        _this.css = css;
        _this.__async = null;
        _this.__events = null;
        _this.__disposables = null;
        _this.state = {};
        _this.props = {};
        _this.theme = getTheme();
        return _this;
    }
    BaseComponent.prototype.created = function () {
        var _this = this;
        registerOnThemeChangeCallback(function (theme) {
            _this.theme = theme;
        });
    };
    /**
     * When the component has mounted, update the componentRef.
     */
    BaseComponent.prototype.mounted = function () {
        this.componentRef = this.$el;
    };
    /**
     * If we have disposables, dispose them automatically on unmount.
     */
    BaseComponent.prototype.beforeDestroy = function () {
        if (this.__disposables) {
            for (var i = 0, len = this._disposables.length; i < len; i++) {
                var disposable = this.__disposables[i];
                if (disposable.dispose) {
                    disposable.dispose();
                }
            }
            this.__disposables = null;
        }
    };
    Object.defineProperty(BaseComponent.prototype, "uid", {
        get: function () {
            // @ts-ignore
            return this._uid;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseComponent.prototype, "classNames", {
        get: function () {
            return {};
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseComponent.prototype, "_disposables", {
        /**
         * Allows subclasses to push things to this._disposables to be auto disposed.
         */
        get: function () {
            if (!this.__disposables) {
                this.__disposables = [];
            }
            return this.__disposables;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseComponent.prototype, "_async", {
        /**
         * Gets the async instance associated with the component, created on demand. The async instance gives
         * subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks
         * will be cleared/ignored automatically after unmounting. The helpers within the async object also
         * preserve the this pointer so that you don't need to "bind" the callbacks.
         */
        get: function () {
            if (!this.__async) {
                this.__async = new Async(this);
                this._disposables.push(this.__async);
            }
            return this.__async;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseComponent.prototype, "events", {
        /**
         * Gets the event group instance assocaited with the component, created on demand. The event instance
         * provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks
         * will be automatically disconnected after unmounting. The helpers within the events object also
         * preserve the this reference so that you don't need to "bind" the callbacks.
         */
        get: function () {
            if (!this.__events) {
                this.__events = new EventGroup(this);
                this._disposables.push(this.__events);
            }
            return this.__events;
        },
        enumerable: false,
        configurable: true
    });
    /**
     * Updates the component's current state.
     *
     * @returns The updated state object.
     */
    BaseComponent.prototype.setState = function (newState) {
        for (var key in newState) {
            this.$set(this.state, key, newState[key]);
        }
        return this.state;
    };
    __decorate([
        Prop({ type: [String, Array], default: '' }),
        __metadata("design:type", String)
    ], BaseComponent.prototype, "className", void 0);
    __decorate([
        Prop({ type: [Object, Function], default: function () { } }),
        __metadata("design:type", Object)
    ], BaseComponent.prototype, "styles", void 0);
    BaseComponent = __decorate([
        Component
    ], BaseComponent);
    return BaseComponent;
}(Vue));
export default BaseComponent;
//# sourceMappingURL=BaseComponent.js.map