import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import BaseComponent from '../../BaseComponent';
import { classNamesFunction, getInitials, getRTL } from '@uifabric-vue/utilities';
import { mergeStyles } from '@uifabric/merge-styles';
import { getPersonaInitialsColor } from '../PersonaInitialsColor';
import { PersonaSize, PersonaPresence as PersonaPresenceEnum, } from '../Persona.types';
import { PersonaPresence } from '../PersonaPresence';
import { sizeToPixels } from '../PersonaConsts';
import { ImageFit, Image } from '../../Image';
import { Icon } from '../../Icon';
var getClassNames = classNamesFunction({
    // There can be many PersonaCoin rendered with different sizes.
    // Therefore setting a larger cache size.
    cacheSize: 100,
});
var PersonaCoinBase = /** @class */ (function (_super) {
    __extends(PersonaCoinBase, _super);
    function PersonaCoinBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.mergeStyles = mergeStyles;
        _this.getPersonaInitialsColor = getPersonaInitialsColor;
        _this.PersonaSize = PersonaSize;
        _this.ImageFit = ImageFit;
        return _this;
    }
    Object.defineProperty(PersonaCoinBase.prototype, "initials", {
        get: function () {
            var _a = this, imageInitials = _a.imageInitials, allowPhoneInitials = _a.allowPhoneInitials, showUnknownPersonaCoin = _a.showUnknownPersonaCoin;
            var isRTL = getRTL(this.theme);
            return imageInitials || getInitials(this.text, isRTL, allowPhoneInitials);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaCoinBase.prototype, "dimension", {
        get: function () {
            var _a = this, coinSize = _a.coinSize, size = _a.size;
            return coinSize || sizeToPixels[size];
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaCoinBase.prototype, "personaPresenceProps", {
        get: function () {
            var _a = this, coinSize = _a.coinSize, theme = _a.theme, isOutOfOffice = _a.isOutOfOffice, presence = _a.presence, presenceTitle = _a.presenceTitle, size = _a.size;
            return {
                coinSize: coinSize,
                isOutOfOffice: isOutOfOffice,
                presence: presence,
                presenceTitle: presenceTitle,
                size: size,
                theme: theme,
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaCoinBase.prototype, "shouldRenderInitials", {
        get: function () {
            return !this.imageUrl;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaCoinBase.prototype, "coinSizeStyle", {
        get: function () {
            var coinSize = this.coinSize;
            return coinSize ? { width: coinSize, height: coinSize } : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PersonaCoinBase.prototype, "classNames", {
        get: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, className = _a.className, coinProps = _a.coinProps, size = _a.size, coinSize = _a.coinSize, showUnknownPersonaCoin = _a.showUnknownPersonaCoin;
            return getClassNames(styles, {
                theme: theme,
                className: coinProps && coinProps.className ? coinProps.className : className,
                size: size,
                coinSize: coinSize,
                showUnknownPersonaCoin: showUnknownPersonaCoin,
            });
        },
        enumerable: false,
        configurable: true
    });
    PersonaCoinBase.prototype.render = function (h) {
        var _a = this, classNames = _a.classNames, size = _a.size, initials = _a.initials, presence = _a.presence, personaPresenceProps = _a.personaPresenceProps, coinSizeStyle = _a.coinSizeStyle, shouldRenderInitials = _a.shouldRenderInitials, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, imageUrl = _a.imageUrl, dimension = _a.dimension;
        return h('div', {
            class: classNames.coin,
            attrs: { role: 'presentation' },
        }, [
            (size !== PersonaSize.size8)
                ? h('div', {
                    class: classNames.imageArea,
                    style: this.coinSizeStyle,
                    attrs: { role: 'presentation' },
                }, [
                    shouldRenderInitials && h('div', {
                        class: mergeStyles(classNames.initials, !showUnknownPersonaCoin && { backgroundColor: getPersonaInitialsColor(this.$props) }),
                        style: coinSizeStyle,
                        attrs: { ariaHidden: 'true' },
                    }, [
                        initials
                            ? h('span', initials)
                            : h(Icon, { attrs: { iconName: 'Contact' } }),
                    ]),
                    imageUrl && h(Image, {
                        class: classNames.image,
                        attrs: {
                            imageFit: ImageFit.cover,
                            src: imageUrl,
                            width: dimension,
                            height: dimension,
                        },
                    }),
                    h(PersonaPresence, { props: personaPresenceProps }),
                ])
                : presence
                    ? h(PersonaPresence, { props: personaPresenceProps })
                    : h(Icon, { class: classNames.size10WithoutPresenceIcon, attrs: { iconName: 'Contact' } }),
        ]);
    };
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], PersonaCoinBase.prototype, "allowPhoneInitials", void 0);
    __decorate([
        Prop({ type: Number, default: PersonaPresenceEnum.none }),
        __metadata("design:type", Number)
    ], PersonaCoinBase.prototype, "presence", void 0);
    __decorate([
        Prop({ type: Number, default: null }),
        __metadata("design:type", Number)
    ], PersonaCoinBase.prototype, "size", void 0);
    __decorate([
        Prop({ type: Number, default: null }),
        __metadata("design:type", Number)
    ], PersonaCoinBase.prototype, "coinSize", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "coinProps", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "showUnknownPersonaCoin", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "isOutOfOffice", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "presenceTitle", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "imageUrl", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "imageInitials", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "text", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PersonaCoinBase.prototype, "initialsColor", void 0);
    PersonaCoinBase = __decorate([
        Component({
            inheritAttrs: false,
            components: { Icon: Icon, OImage: Image, PersonaPresence: PersonaPresence },
        })
    ], PersonaCoinBase);
    return PersonaCoinBase;
}(BaseComponent));
export { PersonaCoinBase };
//# sourceMappingURL=PersonaCoin.base.js.map