var _a, _b;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import { I18N_NAME as I18N_FILTER_NAME } from '../../filters/filter-names';
import { i18nFilter } from '../../filters/i18n/i18n';
import { BackdropMode } from '../../mixins/portal/portal';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { I18N_NAME, SPINNER_NAME } from '../component-names';
import { MI18n } from '../i18n/i18n';
import WithRender from './spinner.html?style=./spinner.scss';
export var MSpinnerStyle;
(function (MSpinnerStyle) {
    MSpinnerStyle["Dark"] = "dark";
    MSpinnerStyle["Regular"] = "regular";
    MSpinnerStyle["Light"] = "light";
    MSpinnerStyle["Lighter"] = "lighter";
})(MSpinnerStyle || (MSpinnerStyle = {}));
export var MSpinnerSize;
(function (MSpinnerSize) {
    MSpinnerSize["Large"] = "large";
    MSpinnerSize["Small"] = "small";
})(MSpinnerSize || (MSpinnerSize = {}));
export var PROCESSING_WARN = 'Change of property "processing" is not supported';
var SPINNER_ID = 'MSpinner';
var MSpinner = /** @class */ (function (_super) {
    __extends(MSpinner, _super);
    function MSpinner() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.spinnerId = SPINNER_ID + '-' + uuid.generate();
        _this.portalTargetEl = {}; // initialized to be responsive
        _this.initialized = false; // seems to be necessary since $refs are not responsive
        return _this;
    }
    MSpinner.prototype.created = function () {
        this.portalTargetEl = undefined;
    };
    MSpinner.prototype.beforeDestroy = function () {
        this.removeBackdrop();
    };
    MSpinner.prototype.onProcessingChange = function (value) {
        if (value) {
            this.openProcessingPortal();
        }
        else {
            this.removeBackdrop();
        }
    };
    Object.defineProperty(MSpinner.prototype, "spinnerElement", {
        get: function () {
            return this.processing ? this.portalTargetEl : this.$refs.spinnerContainer;
        },
        enumerable: false,
        configurable: true
    });
    MSpinner.prototype.openProcessingPortal = function () {
        if (!this.portalTargetEl && this.processing) {
            var element = document.createElement('div');
            element.setAttribute('id', this.spinnerId);
            document.body.appendChild(element);
            this.portalTargetEl = document.getElementById(this.spinnerId);
            this.stackId = this.$modul.pushElement(this.portalTargetEl, BackdropMode.BackdropSlow, false);
            this.portalTargetEl.style.position = 'absolute';
        }
        this.initialized = true;
    };
    MSpinner.prototype.removeBackdrop = function () {
        if (this.portalTargetEl) {
            this.$modul.popElement(this.stackId);
            this.portalTargetEl.style.position = '';
            this.portalTargetEl = undefined;
        }
        var el = document.getElementById(this.spinnerId);
        if (el) {
            document.body.removeChild(el);
        }
    };
    __decorate([
        Prop()
    ], MSpinner.prototype, "title", void 0);
    __decorate([
        Prop()
    ], MSpinner.prototype, "titleMessage", void 0);
    __decorate([
        Prop()
    ], MSpinner.prototype, "description", void 0);
    __decorate([
        Prop()
    ], MSpinner.prototype, "descriptionMessage", void 0);
    __decorate([
        Prop({
            default: MSpinnerStyle.Regular,
            validator: function (value) {
                return value === MSpinnerStyle.Dark ||
                    value === MSpinnerStyle.Light ||
                    value === MSpinnerStyle.Lighter ||
                    value === MSpinnerStyle.Regular;
            }
        })
    ], MSpinner.prototype, "skin", void 0);
    __decorate([
        Prop({
            default: MSpinnerSize.Large,
            validator: function (value) {
                return value === MSpinnerSize.Large ||
                    value === MSpinnerSize.Small;
            }
        })
    ], MSpinner.prototype, "size", void 0);
    __decorate([
        Prop()
    ], MSpinner.prototype, "processing", void 0);
    __decorate([
        Watch('processing')
    ], MSpinner.prototype, "onProcessingChange", null);
    MSpinner = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[I18N_NAME] = MI18n,
                _a),
            filters: (_b = {},
                _b[I18N_FILTER_NAME] = i18nFilter,
                _b)
        })
    ], MSpinner);
    return MSpinner;
}(ModulVue));
export { MSpinner };
var SpinnerPlugin = {
    install: function (v, options) {
        v.component(SPINNER_NAME, MSpinner);
    }
};
export default SpinnerPlugin;
//# sourceMappingURL=spinner.js.map