import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop } from 'vue-property-decorator';
import { MediaQueries } from '../../mixins/media-queries/media-queries';
import { BackdropMode, Portal } from '../../mixins/portal/portal';
import { Enums } from '../../utils/enums/enums';
import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
import { ModulIconName } from '../../utils/modul-icons/modul-icons';
import { ModulVue } from '../../utils/vue/vue';
import { TOAST } from '../component-names';
import { MIconButton, MIconButtonSkin } from '../icon-button/icon-button';
import { MLink, MLinkMode } from '../link/link';
import { MSvg } from '../svg/svg';
import WithRender from './toast.html?style=./toast.scss';
export var MToastTimeout;
(function (MToastTimeout) {
    MToastTimeout["none"] = "none";
    MToastTimeout["xshort"] = "xshort";
    MToastTimeout["short"] = "short";
    MToastTimeout["long"] = "long";
})(MToastTimeout || (MToastTimeout = {}));
export var MToastPosition;
(function (MToastPosition) {
    MToastPosition["TopLeft"] = "top-left";
    MToastPosition["TopCenter"] = "top-center";
    MToastPosition["TopRight"] = "top-right";
    MToastPosition["BottomLeft"] = "bottom-left";
    MToastPosition["BottomCenter"] = "bottom-center";
    MToastPosition["BottomRight"] = "bottom-right";
})(MToastPosition || (MToastPosition = {}));
export var MToastState;
(function (MToastState) {
    MToastState["Confirmation"] = "confirmation";
    MToastState["Information"] = "information";
    MToastState["Warning"] = "warning";
    MToastState["Error"] = "error";
})(MToastState || (MToastState = {}));
export var MToastDuration;
(function (MToastDuration) {
    MToastDuration[MToastDuration["MobileLong"] = 5000] = "MobileLong";
    MToastDuration[MToastDuration["MobileShort"] = 3000] = "MobileShort";
    MToastDuration[MToastDuration["MobileXShort"] = 1500] = "MobileXShort";
    MToastDuration[MToastDuration["DesktopLong"] = 8000] = "DesktopLong";
    MToastDuration[MToastDuration["DesktopShort"] = 5000] = "DesktopShort";
    MToastDuration[MToastDuration["DesktopXShort"] = 2500] = "DesktopXShort";
    MToastDuration[MToastDuration["None"] = 0] = "None";
})(MToastDuration || (MToastDuration = {}));
var MToast = /** @class */ (function (_super) {
    __extends(MToast, _super);
    function MToast() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.buttonMode = MLinkMode.Button;
        _this.closeButtonSkin = MIconButtonSkin.Light;
        _this.closeButtonIconeName = ModulIconName.CloseClear;
        _this.showScreenReaderText = false;
        return _this;
    }
    Object.defineProperty(MToast.prototype, "i18nTypeMessage", {
        get: function () {
            switch (this.state) {
                case MToastState.Error:
                    return this.$i18n.translate('m-toast:error');
                case MToastState.Warning:
                    return this.$i18n.translate('m-toast:warning');
                default:
                    return '';
            }
        },
        enumerable: false,
        configurable: true
    });
    MToast.prototype.doCustomPropOpen = function (value, el) {
        var _this = this;
        el.style.position = 'absolute';
        if (value) {
            if (this.offset !== '0') {
                this.getPortalElement().style.transform = "translateY(" + this.offset + ")";
            }
            this.internalTimeout = this.convertTimeout(this.timeout);
            this.startCloseToast();
            requestAnimationFrame(function () {
                _this.showScreenReaderText = true;
            });
        }
        else {
            this.showScreenReaderText = false;
        }
        return true;
    };
    MToast.prototype.startCloseToast = function () {
        var _this = this;
        this.instantTimeoutStart = Date.now();
        if (this.internalTimeout > 0) {
            this.timerCloseToast = setTimeout(function () {
                _this.onClose();
            }, this.internalTimeout);
        }
    };
    MToast.prototype.getPortalElement = function () {
        return this.$refs.toast;
    };
    MToast.prototype.getBackdropMode = function () {
        return BackdropMode.None;
    };
    MToast.prototype.handlesFocus = function () {
        return false;
    };
    MToast.prototype.beforeCreate = function () {
        if (!this.$svgSprite) {
            return;
        }
        this.$svgSprite.addSvg(ModulIconName.ConfirmationWhiteFilled, require('../../assets/icons/svg/confirmation-white-filled.svg'));
        this.$svgSprite.addSvg(ModulIconName.InformationWhiteFilled, require('../../assets/icons/svg/information-white-filled.svg'));
        this.$svgSprite.addSvg(ModulIconName.WarningWhiteFilled, require('../../assets/icons/svg/warning-white-filled.svg'));
        this.$svgSprite.addSvg(ModulIconName.ErrorWhiteFilled, require('../../assets/icons/svg/error-white-filled.svg'));
    };
    MToast.prototype.mounted = function () {
        if (this.open === undefined || this.open === true) {
            this.as().propOpen = true;
        }
    };
    MToast.prototype.convertTimeout = function (timeout) {
        switch (timeout) {
            case MToastTimeout.long:
                return this.isMobile ? MToastDuration.MobileLong : MToastDuration.DesktopLong;
            case MToastTimeout.short:
                return this.isMobile ? MToastDuration.MobileShort : MToastDuration.DesktopShort;
            case MToastTimeout.xshort:
                return this.isMobile ? MToastDuration.MobileXShort : MToastDuration.DesktopXShort;
            case MToastTimeout.none:
            default:
                return MToastDuration.None;
        }
    };
    MToast.prototype.onAction = function (event) {
        this.onClose();
    };
    MToast.prototype.onClose = function () {
        this.as().propOpen = false;
    };
    Object.defineProperty(MToast.prototype, "isStateInformation", {
        get: function () {
            return this.state === MToastState.Information;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isStateWarning", {
        get: function () {
            return this.state === MToastState.Warning;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isStateError", {
        get: function () {
            return this.state === MToastState.Error;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isStateConfirmation", {
        get: function () {
            return this.state === MToastState.Confirmation;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isTop", {
        get: function () {
            return this.position === MToastPosition.TopLeft ||
                this.position === MToastPosition.TopCenter ||
                this.position === MToastPosition.TopRight;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isLeft", {
        get: function () {
            return this.position === MToastPosition.TopLeft ||
                this.position === MToastPosition.BottomLeft;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isCenter", {
        get: function () {
            return this.position === MToastPosition.TopCenter ||
                this.position === MToastPosition.BottomCenter;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isRight", {
        get: function () {
            return this.position === MToastPosition.TopRight ||
                this.position === MToastPosition.BottomRight;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MToast.prototype, "isMobile", {
        get: function () {
            return this.as().isMqMaxS;
        },
        enumerable: false,
        configurable: true
    });
    MToast.prototype.getIcon = function () {
        switch (this.state) {
            case MToastState.Confirmation:
                return ModulIconName.ConfirmationWhiteFilled;
            case MToastState.Information:
                return ModulIconName.InformationWhiteFilled;
            case MToastState.Warning:
                return ModulIconName.WarningWhiteFilled;
            case MToastState.Error:
                return ModulIconName.ErrorWhiteFilled;
            default:
                return '';
        }
    };
    MToast.prototype.mouseEnterToast = function () {
        if (!this.isMobile && this.timerCloseToast !== undefined) {
            this.restoreTimeout();
            clearTimeout(this.timerCloseToast);
            this.timerCloseToast = undefined;
        }
    };
    MToast.prototype.mouseLeaveToast = function () {
        if (!this.isMobile) {
            this.startCloseToast();
        }
    };
    MToast.prototype.restoreTimeout = function () {
        this.internalTimeout -= (Date.now() - this.instantTimeoutStart);
    };
    __decorate([
        Prop({
            default: MToastState.Confirmation,
            validator: function (value) { return Enums.toValueArray(MToastState).includes(value); }
        })
    ], MToast.prototype, "state", void 0);
    __decorate([
        Prop({
            default: MToastPosition.BottomRight,
            validator: function (value) { return Enums.toValueArray(MToastPosition).includes(value); }
        })
    ], MToast.prototype, "position", void 0);
    __decorate([
        Prop({
            default: MToastTimeout.none,
            validator: function (value) { return Enums.toValueArray(MToastTimeout).includes(value); }
        })
    ], MToast.prototype, "timeout", void 0);
    __decorate([
        Prop()
    ], MToast.prototype, "open", void 0);
    __decorate([
        Prop()
    ], MToast.prototype, "actionLabel", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MToast.prototype, "icon", void 0);
    __decorate([
        Prop({
            default: '0'
        })
    ], MToast.prototype, "offset", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MToast.prototype, "closeButton", void 0);
    __decorate([
        Emit('action-button')
    ], MToast.prototype, "onAction", null);
    MToast = __decorate([
        WithRender,
        Component({
            components: {
                MIconButton: MIconButton,
                MLink: MLink,
                MSvg: MSvg
            },
            mixins: [MediaQueries, Portal]
        })
    ], MToast);
    return MToast;
}(ModulVue));
export { MToast };
var ToastPlugin = {
    install: function (v, options) {
        v.use(MediaQueriesPlugin);
        v.component(TOAST, MToast);
    }
};
export default ToastPlugin;
//# sourceMappingURL=toast.js.map