define(["require", "exports", "tslib", "react", "../../Utilities", "../../Image", "./PersonaPresence", "./Persona.types", "../../Icon", "./PersonaCoin.scss", "../../Styling", "./PersonaInitialsColor"], function (require, exports, tslib_1, React, Utilities_1, Image_1, PersonaPresence_1, Persona_types_1, Icon_1, stylesImport, Styling_1, PersonaInitialsColor_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var SIZE_TO_PIXELS = (_a = {},
        _a[Persona_types_1.PersonaSize.tiny] = 20,
        _a[Persona_types_1.PersonaSize.extraExtraSmall] = 24,
        _a[Persona_types_1.PersonaSize.extraSmall] = 28,
        _a[Persona_types_1.PersonaSize.small] = 40,
        _a[Persona_types_1.PersonaSize.regular] = 48,
        _a[Persona_types_1.PersonaSize.large] = 72,
        _a[Persona_types_1.PersonaSize.extraLarge] = 100,
        _a[Persona_types_1.PersonaSize.size24] = 24,
        _a[Persona_types_1.PersonaSize.size28] = 28,
        _a[Persona_types_1.PersonaSize.size10] = 20,
        _a[Persona_types_1.PersonaSize.size32] = 32,
        _a[Persona_types_1.PersonaSize.size40] = 40,
        _a[Persona_types_1.PersonaSize.size48] = 48,
        _a[Persona_types_1.PersonaSize.size72] = 72,
        _a[Persona_types_1.PersonaSize.size100] = 100,
        _a);
    exports.PERSONACOIN_SIZE = (_b = {},
        // All non-numerically named sizes are deprecated, use the numerically named classes below
        _b[Persona_types_1.PersonaSize.tiny] = 'ms-Persona--tiny ' + styles.rootIsSize10,
        _b[Persona_types_1.PersonaSize.extraExtraSmall] = 'ms-Persona--xxs ' + styles.rootIsSize24,
        _b[Persona_types_1.PersonaSize.extraSmall] = 'ms-Persona--xs ' + styles.rootIsSize28,
        _b[Persona_types_1.PersonaSize.small] = 'ms-Persona--sm ' + styles.rootIsSize40,
        _b[Persona_types_1.PersonaSize.regular] = '',
        _b[Persona_types_1.PersonaSize.large] = 'ms-Persona--lg ' + styles.rootIsSize72,
        _b[Persona_types_1.PersonaSize.extraLarge] = 'ms-Persona--xl ' + styles.rootIsSize100,
        _b[Persona_types_1.PersonaSize.size10] = 'ms-Persona--size10 ' + styles.rootIsSize10,
        _b[Persona_types_1.PersonaSize.size16] = 'ms-Persona--size16 ' + styles.rootIsSize16,
        _b[Persona_types_1.PersonaSize.size24] = 'ms-Persona--size24 ' + styles.rootIsSize24,
        _b[Persona_types_1.PersonaSize.size28] = 'ms-Persona--size28 ' + styles.rootIsSize28,
        _b[Persona_types_1.PersonaSize.size32] = 'ms-Persona--size32 ' + styles.rootIsSize32,
        _b[Persona_types_1.PersonaSize.size40] = 'ms-Persona--size40 ' + styles.rootIsSize40,
        _b[Persona_types_1.PersonaSize.size48] = 'ms-Persona--size48 ' + styles.rootIsSize48,
        _b[Persona_types_1.PersonaSize.size72] = 'ms-Persona--size72 ' + styles.rootIsSize72,
        _b[Persona_types_1.PersonaSize.size100] = 'ms-Persona--size100 ' + styles.rootIsSize100,
        _b);
    var PersonaCoin = /** @class */ (function (_super) {
        tslib_1.__extends(PersonaCoin, _super);
        function PersonaCoin(props) {
            var _this = _super.call(this, props) || this;
            _this._onRenderCoin = function (props) {
                var _a = _this.props, coinSize = _a.coinSize, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, imageShouldFadeIn = _a.imageShouldFadeIn, imageShouldStartVisible = _a.imageShouldStartVisible;
                var size = _this.props.size;
                return (React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, width: coinSize || SIZE_TO_PIXELS[size], height: coinSize || SIZE_TO_PIXELS[size], alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: _this._onPhotoLoadingStateChange }));
            };
            _this._onRenderInitials = function (props) {
                var imageInitials = props.imageInitials;
                var primaryText = props.primaryText;
                var allowPhoneInitials = props.allowPhoneInitials;
                var isRTL = Utilities_1.getRTL();
                imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL, allowPhoneInitials);
                return (imageInitials !== '' ?
                    React.createElement("span", null, imageInitials) :
                    React.createElement(Icon_1.Icon, { iconName: 'Contact' }));
            };
            _this._onPhotoLoadingStateChange = function (loadState) {
                _this.setState({
                    isImageLoaded: loadState === Image_1.ImageLoadState.loaded,
                    isImageError: loadState === Image_1.ImageLoadState.error
                });
                if (_this.props.onPhotoLoadingStateChange) {
                    _this.props.onPhotoLoadingStateChange(loadState);
                }
            };
            _this.state = {
                isImageLoaded: false,
                isImageError: false
            };
            return _this;
        }
        PersonaCoin.prototype.render = function () {
            var _a = this.props, coinProps = _a.coinProps, coinSize = _a.coinSize, imageUrl = _a.imageUrl, _b = _a.onRenderCoin, onRenderCoin = _b === void 0 ? this._onRenderCoin : _b, _c = _a.onRenderInitials, onRenderInitials = _c === void 0 ? this._onRenderInitials : _c;
            var size = this.props.size;
            var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
            var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
            return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.css('ms-Persona-coin', exports.PERSONACOIN_SIZE[size], coinProps && coinProps.className) }),
                (size !== Persona_types_1.PersonaSize.size10 && size !== Persona_types_1.PersonaSize.tiny) ? (React.createElement("div", tslib_1.__assign({}, coinProps, { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea), style: coinSizeStyle }),
                    !this.state.isImageLoaded &&
                        (!imageUrl || this.state.isImageError) &&
                        (React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, Styling_1.mergeStyles({
                                backgroundColor: PersonaInitialsColor_1.initialsColorPropToColorCode(this.props)
                            })), style: coinSizeStyle, "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
                    onRenderCoin(this.props, this._onRenderCoin),
                    React.createElement(PersonaPresence_1.PersonaPresence, tslib_1.__assign({}, this.props)))) :
                    (this.props.presence ?
                        React.createElement(PersonaPresence_1.PersonaPresence, tslib_1.__assign({}, this.props)) :
                        React.createElement(Icon_1.Icon, { iconName: 'Contact', className: styles.size10NoPresenceIcon })),
                this.props.children));
        };
        PersonaCoin.defaultProps = {
            primaryText: '',
            size: Persona_types_1.PersonaSize.size48,
            presence: Persona_types_1.PersonaPresence.none,
            imageAlt: ''
        };
        return PersonaCoin;
    }(React.Component));
    exports.PersonaCoin = PersonaCoin;
    var _a, _b;
});
//# sourceMappingURL=PersonaCoin.js.map