import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, customizable, divProperties, getInitials, getNativeProps, getRTL, } from '../../../Utilities';
import { mergeStyles } from '../../../Styling';
import { PersonaPresence } from '../PersonaPresence/index';
import { Icon } from '../../../Icon';
import { Image, ImageFit, ImageLoadState } from '../../../Image';
import { PersonaPresence as PersonaPresenceEnum, PersonaSize, } from '../Persona.types';
import { initialsColorPropToColorCode } from '../PersonaInitialsColor';
var getClassNames = classNamesFunction();
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);
/**
 * PersonaCoin with no default styles.
 * [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)
 */
var PersonaCoinBase = /** @class */ (function (_super) {
    tslib_1.__extends(PersonaCoinBase, _super);
    function PersonaCoinBase(props) {
        var _this = _super.call(this, props) || this;
        _this._onRenderCoin = function (props) {
            var _a = _this.props, coinSize = _a.coinSize, getStyles = _a.getStyles, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, imageShouldFadeIn = _a.imageShouldFadeIn, imageShouldStartVisible = _a.imageShouldStartVisible, theme = _a.theme, showUnknownPersonaCoin = _a.showUnknownPersonaCoin;
            var size = _this.props.size;
            var classNames = getClassNames(getStyles, {
                theme: theme,
                size: size,
                showUnknownPersonaCoin: showUnknownPersonaCoin
            });
            return (React.createElement(Image, { className: classNames.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 }));
        };
        _this._onRenderInitials = function (props) {
            var imageInitials = props.imageInitials;
            var allowPhoneInitials = props.allowPhoneInitials, primaryText = props.primaryText, showUnknownPersonaCoin = props.showUnknownPersonaCoin;
            if (showUnknownPersonaCoin) {
                return React.createElement(Icon, { iconName: 'Help' });
            }
            var isRTL = getRTL();
            imageInitials = imageInitials || getInitials(primaryText, isRTL, allowPhoneInitials);
            return (imageInitials !== ''
                ? React.createElement("span", null, imageInitials)
                : React.createElement(Icon, { iconName: 'Contact' }));
        };
        _this._onPhotoLoadingStateChange = function (loadState) {
            _this.setState({
                isImageLoaded: loadState === ImageLoadState.loaded,
                isImageError: loadState === ImageLoadState.error
            });
            _this.props.onPhotoLoadingStateChange && _this.props.onPhotoLoadingStateChange(loadState);
        };
        _this.state = {
            isImageLoaded: false,
            isImageError: false
        };
        return _this;
    }
    PersonaCoinBase.prototype.render = function () {
        var _a = this.props, className = _a.className, coinProps = _a.coinProps, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, coinSize = _a.coinSize, getStyles = _a.getStyles, imageUrl = _a.imageUrl, _b = _a.onRenderCoin, onRenderCoin = _b === void 0 ? this._onRenderCoin : _b, _c = _a.onRenderInitials, onRenderInitials = _c === void 0 ? this._onRenderInitials : _c, presence = _a.presence, theme = _a.theme;
        var size = this.props.size;
        var divProps = getNativeProps(this.props, divProperties);
        var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
        var personaPresenceProps = {
            coinSize: coinSize,
            presence: presence,
            size: size,
            theme: theme,
        };
        // Use getStyles from props, or fall back to getStyles from styles file.
        var classNames = getClassNames(getStyles, {
            theme: theme,
            className: (coinProps && coinProps.className) ? coinProps.className : className,
            size: size,
            showUnknownPersonaCoin: showUnknownPersonaCoin,
        });
        return (React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.coin }),
            (size !== PersonaSize.size10 && size !== PersonaSize.tiny)
                ? (React.createElement("div", tslib_1.__assign({}, coinProps, { className: classNames.imageArea, style: coinSizeStyle }),
                    !this.state.isImageLoaded &&
                        (!imageUrl || this.state.isImageError) &&
                        (React.createElement("div", { className: mergeStyles(classNames.initials, !showUnknownPersonaCoin && { 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({}, personaPresenceProps)))) : ( // Otherwise, render just PersonaPresence.
            this.props.presence
                ? React.createElement(PersonaPresence, tslib_1.__assign({}, personaPresenceProps))
                : // Just render Contact Icon if there isn't a Presence prop.
                    React.createElement(Icon, { iconName: 'Contact', className: classNames.size10WithoutPresenceIcon })),
            this.props.children));
    };
    PersonaCoinBase.defaultProps = {
        primaryText: '',
        size: PersonaSize.size48,
        presence: PersonaPresenceEnum.none,
        imageAlt: '',
    };
    PersonaCoinBase = tslib_1.__decorate([
        customizable('PersonaCoin', ['theme'])
    ], PersonaCoinBase);
    return PersonaCoinBase;
}(BaseComponent));
export { PersonaCoinBase };
var _a;
//# sourceMappingURL=PersonaCoin.base.js.map