import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import BaseComponent from '../../BaseComponent';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { PersonaPresence as PersonaPresenceEnum, } from '../Persona.types';
import { sizeBoolean } from '../PersonaConsts';
import { Icon } from '../../Icon';
var coinSizeFontScaleFactor = 6;
var coinSizePresenceScaleFactor = 3;
var presenceMaxSize = 40;
var presenceFontMaxSize = 20;
var getClassNames = classNamesFunction({
    // There can be many PersonaPresence rendered with different sizes.
    // Therefore setting a larger cache size.
    cacheSize: 100,
});
var PersonaPresenceBase = /** @class */ (function (_super) {
    __extends(PersonaPresenceBase, _super);
    function PersonaPresenceBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.PersonaPresenceEnum = PersonaPresenceEnum;
        return _this;
    }
    Object.defineProperty(PersonaPresenceBase.prototype, "renderIcon", {
        get: function () {
            var coinSize = this.coinSize;
            var size = sizeBoolean(this.size);
            return !(size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) &&
                (coinSize ? coinSize > 32 : true);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaPresenceBase.prototype, "presenceHeightWidth", {
        get: function () {
            var coinSize = this.coinSize;
            var presenceHeightWidth = coinSize
                ? coinSize / coinSizePresenceScaleFactor < presenceMaxSize
                    ? coinSize / coinSizePresenceScaleFactor + 'px'
                    : presenceMaxSize + 'px'
                : '';
            return presenceHeightWidth;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaPresenceBase.prototype, "coinSizeWithPresenceStyle", {
        get: function () {
            var _a = this, coinSize = _a.coinSize, presenceHeightWidth = _a.presenceHeightWidth;
            return coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaPresenceBase.prototype, "coinSizeWithPresenceIconStyle", {
        get: function () {
            var _a = this, coinSize = _a.coinSize, isOutOfOffice = _a.isOutOfOffice, styles = _a.styles, // Use getStyles from props.
            presence = _a.presence, presenceTitle = _a.presenceTitle, presenceHeightWidth = _a.presenceHeightWidth;
            var size = sizeBoolean(this.size);
            var presenceFontSize = coinSize
                ? coinSize / coinSizeFontScaleFactor < presenceFontMaxSize
                    ? coinSize / coinSizeFontScaleFactor + 'px'
                    : presenceFontMaxSize + 'px'
                : '';
            return coinSize ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth } : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaPresenceBase.prototype, "classNames", {
        get: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, presence = _a.presence, size = _a.size, isOutOfOffice = _a.isOutOfOffice;
            return getClassNames(styles, {
                theme: theme,
                presence: presence,
                size: size,
                isOutOfOffice: isOutOfOffice,
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaPresenceBase.prototype, "icon", {
        get: function () {
            var _a = this, presence = _a.presence, isOutOfOffice = _a.isOutOfOffice;
            if (!presence) {
                return undefined;
            }
            var oofIcon = 'SkypeArrow';
            switch (PersonaPresenceEnum[presence]) {
                case 'online':
                    return 'SkypeCheck';
                case 'away':
                    return isOutOfOffice ? oofIcon : 'SkypeClock';
                case 'dnd':
                    return 'SkypeMinus';
                case 'offline':
                    return isOutOfOffice ? oofIcon : '';
            }
            return '';
        },
        enumerable: false,
        configurable: true
    });
    PersonaPresenceBase.prototype.render = function (h) {
        var _a = this, classNames = _a.classNames, presence = _a.presence, presenceTitle = _a.presenceTitle, coinSizeWithPresenceStyle = _a.coinSizeWithPresenceStyle, coinSizeWithPresenceIconStyle = _a.coinSizeWithPresenceIconStyle, icon = _a.icon, renderIcon = _a.renderIcon;
        if (presence === PersonaPresenceEnum.none)
            return;
        return h('div', {
            class: classNames.presence,
            attrs: {
                title: presenceTitle,
            },
            style: coinSizeWithPresenceStyle,
        }, [
            renderIcon && h(Icon, {
                class: classNames.presenceIcon,
                style: coinSizeWithPresenceIconStyle,
                props: {
                    iconName: icon,
                },
            }),
        ]);
    };
    __decorate([
        Prop({ type: Number, required: true }),
        __metadata("design:type", Number)
    ], PersonaPresenceBase.prototype, "presence", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaPresenceBase.prototype, "size", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaPresenceBase.prototype, "isOutOfOffice", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaPresenceBase.prototype, "coinSize", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaPresenceBase.prototype, "presenceTitle", void 0);
    PersonaPresenceBase = __decorate([
        Component({
            components: { Icon: Icon },
            name: 'PersonaPresence',
        })
    ], PersonaPresenceBase);
    return PersonaPresenceBase;
}(BaseComponent));
export { PersonaPresenceBase };
//# sourceMappingURL=PersonaPresence.base.js.map