"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Image_1 = require("../../Image");
var PersonaPresence_1 = require("./PersonaPresence");
var Persona_Props_1 = require("./Persona.Props");
var PersonaConsts_1 = require("./PersonaConsts");
var stylesImport = require("./Persona.scss");
var styles = stylesImport;
var SIZE_TO_PIXELS = (_a = {},
    _a[Persona_Props_1.PersonaSize.extraExtraSmall] = 24,
    _a[Persona_Props_1.PersonaSize.size28] = 28,
    _a[Persona_Props_1.PersonaSize.tiny] = 30,
    _a[Persona_Props_1.PersonaSize.extraSmall] = 32,
    _a[Persona_Props_1.PersonaSize.small] = 40,
    _a[Persona_Props_1.PersonaSize.regular] = 48,
    _a[Persona_Props_1.PersonaSize.large] = 72,
    _a[Persona_Props_1.PersonaSize.extraLarge] = 100,
    _a);
var COLOR_SWATCHES_LOOKUP = [
    Persona_Props_1.PersonaInitialsColor.lightGreen,
    Persona_Props_1.PersonaInitialsColor.lightBlue,
    Persona_Props_1.PersonaInitialsColor.lightPink,
    Persona_Props_1.PersonaInitialsColor.green,
    Persona_Props_1.PersonaInitialsColor.darkGreen,
    Persona_Props_1.PersonaInitialsColor.pink,
    Persona_Props_1.PersonaInitialsColor.magenta,
    Persona_Props_1.PersonaInitialsColor.purple,
    Persona_Props_1.PersonaInitialsColor.black,
    Persona_Props_1.PersonaInitialsColor.teal,
    Persona_Props_1.PersonaInitialsColor.blue,
    Persona_Props_1.PersonaInitialsColor.darkBlue,
    Persona_Props_1.PersonaInitialsColor.orange,
    Persona_Props_1.PersonaInitialsColor.darkRed,
    Persona_Props_1.PersonaInitialsColor.red
];
var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;
var PersonaCoin = (function (_super) {
    tslib_1.__extends(PersonaCoin, _super);
    function PersonaCoin(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isImageLoaded: false,
        };
        return _this;
    }
    PersonaCoin.prototype.render = function () {
        var _a = this.props, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, initialsColor = _a.initialsColor, primaryText = _a.primaryText, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, imageShouldStartVisible = _a.imageShouldStartVisible;
        var size = this.props.size;
        var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
        initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText);
        return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.css('ms-Persona-coin', PersonaConsts_1.PERSONA_SIZE[size]) }),
            size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea) },
                !this.state.isImageLoaded &&
                    (React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]), "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
                React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, width: SIZE_TO_PIXELS[size], height: SIZE_TO_PIXELS[size], alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }))),
            React.createElement(PersonaPresence_1.PersonaPresence, tslib_1.__assign({}, this.props)),
            this.props.children));
    };
    PersonaCoin.prototype._getColorFromName = function (displayName) {
        var color = Persona_Props_1.PersonaInitialsColor.blue;
        if (!displayName) {
            return color;
        }
        var hashCode = 0;
        for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {
            var ch = displayName.charCodeAt(iLen);
            var shift = iLen % 8;
            // tslint:disable-next-line:no-bitwise
            hashCode ^= (ch << shift) + (ch >> (8 - shift));
        }
        color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];
        return color;
    };
    PersonaCoin.prototype._onRenderInitials = function (props) {
        var imageInitials = props.imageInitials, primaryText = props.primaryText;
        var isRTL = Utilities_1.getRTL();
        imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL);
        return (React.createElement("span", null, imageInitials));
    };
    PersonaCoin.prototype._onPhotoLoadingStateChange = function (loadState) {
        this.setState({
            isImageLoaded: loadState === Image_1.ImageLoadState.loaded
        });
    };
    PersonaCoin.defaultProps = {
        primaryText: '',
        size: Persona_Props_1.PersonaSize.regular,
        presence: Persona_Props_1.PersonaPresence.none,
        imageAlt: ''
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PersonaCoin.prototype, "_onRenderInitials", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], PersonaCoin.prototype, "_onPhotoLoadingStateChange", null);
    return PersonaCoin;
}(React.Component));
exports.PersonaCoin = PersonaCoin;
var _a;
//# sourceMappingURL=PersonaCoin.js.map