var _a;
import { __decorate, __extends } from "tslib";
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit, Prop } from 'vue-property-decorator';
import { AVATAR_NAME, ICON_NAME } from '../component-names';
import { MIcon } from '../icon/icon';
import WithRender from './avatar.html?style=./avatar.scss';
export var MAvatarSize;
(function (MAvatarSize) {
    MAvatarSize[MAvatarSize["SMALL"] = 32] = "SMALL";
    MAvatarSize[MAvatarSize["MEDIUM"] = 64] = "MEDIUM";
    MAvatarSize[MAvatarSize["LARGE"] = 192] = "LARGE";
})(MAvatarSize || (MAvatarSize = {}));
var MAvatar = /** @class */ (function (_super) {
    __extends(MAvatar, _super);
    function MAvatar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isFocusVisible = false;
        _this.isHovered = false;
        _this.isTouched = false;
        _this.timeoutContentVisible = 0;
        return _this;
    }
    MAvatar.prototype.destroy = function () {
        this.resetTouch();
    };
    Object.defineProperty(MAvatar.prototype, "sizeStyle", {
        get: function () {
            return {
                width: this.size + 'px',
                height: this.size + 'px'
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "defaultAvatar", {
        get: function () {
            return this.isSmall ? 'm-svg__profile' : 'm-svg__avatar';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "isSmall", {
        get: function () {
            return this.size === MAvatarSize.SMALL;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "tabindex", {
        get: function () {
            return this.clickable ? 0 : -1;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "interactionClass", {
        get: function () {
            return {
                'm--is-clickable': this.clickable,
                'm--is-focus-visible': this.isFocusVisible
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "showContent", {
        get: function () {
            return this.hover || this.isTouched;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "isEmptyContentSlot", {
        get: function () {
            return !this.$scopedSlots.content;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAvatar.prototype, "hover", {
        get: function () {
            return this.isHovered;
        },
        set: function (hover) {
            this.isHovered = hover;
        },
        enumerable: false,
        configurable: true
    });
    MAvatar.prototype.focusDisplay = function (focusVisible) {
        this.isFocusVisible = focusVisible;
    };
    MAvatar.prototype.onClick = function () {
        if (this.clickable) {
            this.emitClick();
        }
    };
    MAvatar.prototype.onTouchend = function () {
        var _this = this;
        if (this.clickable) {
            if (this.isTouched || this.isEmptyContentSlot) {
                this.resetTouch();
                this.emitTouch();
            }
            else {
                this.$modul.event.$on('click', this.resetTouch);
                this.isTouched = true;
                this.timeoutContentVisible = window.setTimeout(function () {
                    _this.isTouched = false;
                }, 5000);
            }
        }
    };
    MAvatar.prototype.resetTouch = function () {
        this.$modul.event.$off('click', this.resetTouch);
        clearTimeout(this.timeoutContentVisible);
        this.isTouched = false;
    };
    MAvatar.prototype.emitTouch = function () { };
    MAvatar.prototype.emitClick = function () { };
    __decorate([
        Prop({
            default: MAvatarSize.SMALL,
            validator: function (value) {
                return value === MAvatarSize.SMALL ||
                    value === MAvatarSize.MEDIUM ||
                    value === MAvatarSize.LARGE;
            }
        })
    ], MAvatar.prototype, "size", void 0);
    __decorate([
        Prop({ default: false })
    ], MAvatar.prototype, "clickable", void 0);
    __decorate([
        Emit('touch')
    ], MAvatar.prototype, "emitTouch", null);
    __decorate([
        Emit('click')
    ], MAvatar.prototype, "emitClick", null);
    MAvatar = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[ICON_NAME] = MIcon,
                _a)
        })
    ], MAvatar);
    return MAvatar;
}(Vue));
export { MAvatar };
var AvatarPlugin = {
    install: function (v) {
        v.prototype.$log.debug(AVATAR_NAME, 'plugin.install');
        v.component(AVATAR_NAME, MAvatar);
    }
};
export default AvatarPlugin;
//# sourceMappingURL=avatar.js.map