import * as tslib_1 from "tslib";
import * as React from 'react';
import { autobind, css, divProperties, getInitials, getNativeProps, getRTL } from '../../Utilities';
import { Image, ImageFit, ImageLoadState } from '../../Image';
import { PersonaPresence } from './PersonaPresence';
import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types';
import { PERSONA_SIZE } from './PersonaConsts';
import { Icon } from '../../Icon';
import * as stylesImport from './Persona.scss';
var styles = stylesImport;
var SIZE_TO_PIXELS = (_a = {},
    _a[PersonaSize.tiny] = 20,
    _a[PersonaSize.extraExtraSmall] = 24,
    _a[PersonaSize.extraSmall] = 28,
    _a[PersonaSize.small] = 40,
    _a[PersonaSize.regular] = 48,
    _a[PersonaSize.large] = 72,
    _a[PersonaSize.extraLarge] = 100,
    _a[PersonaSize.size24] = 24,
    _a[PersonaSize.size28] = 28,
    _a[PersonaSize.size10] = 20,
    _a[PersonaSize.size32] = 32,
    _a[PersonaSize.size40] = 40,
    _a[PersonaSize.size48] = 48,
    _a[PersonaSize.size72] = 72,
    _a[PersonaSize.size100] = 100,
    _a);
import { mergeStyles } from '../../Styling';
import { initialsColorPropToColorCode } from './PersonaInitialsColor';
var PersonaCoin = /** @class */ (function (_super) {
    tslib_1.__extends(PersonaCoin, _super);
    function PersonaCoin(props) {
        var _this = _super.call(this, props) || this;
        _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, imageAlt = _a.imageAlt, initialsColor = _a.initialsColor, primaryText = _a.primaryText, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderCoin, onRenderCoin = _b === void 0 ? this._onRenderCoin : _b, _c = _a.onRenderInitials, onRenderInitials = _c === void 0 ? this._onRenderInitials : _c, imageShouldStartVisible = _a.imageShouldStartVisible;
        var size = this.props.size;
        var divProps = getNativeProps(this.props, divProperties);
        var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
        return (React.createElement("div", tslib_1.__assign({}, divProps, { className: css('ms-Persona-coin', PERSONA_SIZE[size], coinProps && coinProps.className) }),
            (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? (React.createElement("div", tslib_1.__assign({}, coinProps, { className: css('ms-Persona-imageArea', styles.imageArea), style: coinSizeStyle }),
                !this.state.isImageLoaded &&
                    (!imageUrl || this.state.isImageError) &&
                    (React.createElement("div", { className: css('ms-Persona-initials', styles.initials, mergeStyles({
                            backgroundColor: initialsColorPropToColorCode(this.props)
                        })), style: coinSizeStyle, "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
                onRenderCoin(this.props, this._onRenderCoin),
                React.createElement(PersonaPresence, tslib_1.__assign({}, this.props)))) :
                (this.props.presence ?
                    React.createElement(PersonaPresence, tslib_1.__assign({}, this.props)) :
                    React.createElement(Icon, { iconName: 'Contact', className: styles.size10NoPresenceIcon })),
            this.props.children));
    };
    PersonaCoin.prototype._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, { className: css('ms-Persona-image', styles.image), imageFit: 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 }));
    };
    PersonaCoin.prototype._onRenderInitials = function (props) {
        var imageInitials = props.imageInitials, primaryText = props.primaryText;
        var isRTL = getRTL();
        imageInitials = imageInitials || getInitials(primaryText, isRTL);
        return (imageInitials !== '' ?
            React.createElement("span", null, imageInitials) :
            React.createElement(Icon, { iconName: 'Contact' }));
    };
    PersonaCoin.prototype._onPhotoLoadingStateChange = function (loadState) {
        this.setState({
            isImageLoaded: loadState === ImageLoadState.loaded,
            isImageError: loadState === ImageLoadState.error
        });
        if (this.props.onPhotoLoadingStateChange) {
            this.props.onPhotoLoadingStateChange(loadState);
        }
    };
    PersonaCoin.defaultProps = {
        primaryText: '',
        size: PersonaSize.size48,
        presence: PersonaPresenceEnum.none,
        imageAlt: ''
    };
    tslib_1.__decorate([
        autobind
    ], PersonaCoin.prototype, "_onRenderCoin", null);
    tslib_1.__decorate([
        autobind
    ], PersonaCoin.prototype, "_onRenderInitials", null);
    tslib_1.__decorate([
        autobind
    ], PersonaCoin.prototype, "_onPhotoLoadingStateChange", null);
    return PersonaCoin;
}(React.Component));
export { PersonaCoin };
var _a;
//# sourceMappingURL=PersonaCoin.js.map