"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Tooltip_1 = require("../../Tooltip");
var PersonaCoin_1 = require("./PersonaCoin/PersonaCoin");
var Persona_types_1 = require("./Persona.types");
var getClassNames = Utilities_1.classNamesFunction();
/**
 * Persona with no default styles.
 * [Use the `styles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)
 */
var PersonaBase = /** @class */ (function (_super) {
    tslib_1.__extends(PersonaBase, _super);
    function PersonaBase(props) {
        var _this = _super.call(this, props) || this;
        _this._warnDeprecations({ primaryText: 'text' });
        return _this;
    }
    PersonaBase.prototype.render = function () {
        // wrapping default render behavior based on various this.props properties
        var _onRenderPrimaryText = this._onRenderText(this._getText()), _onRenderSecondaryText = this._onRenderText(this.props.secondaryText), _onRenderTertiaryText = this._onRenderText(this.props.tertiaryText), _onRenderOptionalText = this._onRenderText(this.props.optionalText);
        var _a = this.props, hidePersonaDetails = _a.hidePersonaDetails, _b = _a.onRenderOptionalText, onRenderOptionalText = _b === void 0 ? _onRenderOptionalText : _b, _c = _a.onRenderPrimaryText, onRenderPrimaryText = _c === void 0 ? _onRenderPrimaryText : _c, _d = _a.onRenderSecondaryText, onRenderSecondaryText = _d === void 0 ? _onRenderSecondaryText : _d, _e = _a.onRenderTertiaryText, onRenderTertiaryText = _e === void 0 ? _onRenderTertiaryText : _e;
        var size = this.props.size;
        // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used
        var _f = this.props, allowPhoneInitials = _f.allowPhoneInitials, className = _f.className, coinProps = _f.coinProps, showUnknownPersonaCoin = _f.showUnknownPersonaCoin, coinSize = _f.coinSize, styles = _f.styles, imageAlt = _f.imageAlt, imageInitials = _f.imageInitials, imageShouldFadeIn = _f.imageShouldFadeIn, imageShouldStartVisible = _f.imageShouldStartVisible, imageUrl = _f.imageUrl, initialsColor = _f.initialsColor, isOutOfOffice = _f.isOutOfOffice, onPhotoLoadingStateChange = _f.onPhotoLoadingStateChange, onRenderCoin = _f.onRenderCoin, onRenderInitials = _f.onRenderInitials, presence = _f.presence, showInitialsUntilImageLoads = _f.showInitialsUntilImageLoads, showSecondaryText = _f.showSecondaryText, theme = _f.theme;
        var personaCoinProps = tslib_1.__assign({ allowPhoneInitials: allowPhoneInitials,
            showUnknownPersonaCoin: showUnknownPersonaCoin,
            coinSize: coinSize,
            imageAlt: imageAlt,
            imageInitials: imageInitials,
            imageShouldFadeIn: imageShouldFadeIn,
            imageShouldStartVisible: imageShouldStartVisible,
            imageUrl: imageUrl,
            initialsColor: initialsColor,
            onPhotoLoadingStateChange: onPhotoLoadingStateChange,
            onRenderCoin: onRenderCoin,
            onRenderInitials: onRenderInitials,
            presence: presence,
            showInitialsUntilImageLoads: showInitialsUntilImageLoads,
            size: size, text: this._getText(), isOutOfOffice: isOutOfOffice }, coinProps);
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            showSecondaryText: showSecondaryText,
            presence: presence,
            size: size
        });
        var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
        var personaDetails = (React.createElement("div", { className: classNames.details },
            this._renderElement(classNames.primaryText, onRenderPrimaryText, _onRenderPrimaryText),
            this._renderElement(classNames.secondaryText, onRenderSecondaryText, _onRenderSecondaryText),
            this._renderElement(classNames.tertiaryText, onRenderTertiaryText, _onRenderTertiaryText),
            this._renderElement(classNames.optionalText, onRenderOptionalText, _onRenderOptionalText),
            this.props.children));
        return (React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, style: coinSize ? { height: coinSize, minWidth: coinSize } : undefined }),
            React.createElement(PersonaCoin_1.PersonaCoin, tslib_1.__assign({}, personaCoinProps)),
            (!hidePersonaDetails || (size === Persona_types_1.PersonaSize.size8 || size === Persona_types_1.PersonaSize.size10 || size === Persona_types_1.PersonaSize.tiny)) &&
                personaDetails));
    };
    /**
     * Renders various types of Text (primaryText, secondaryText, etc)
     * based on the classNames passed
     * @param classNames - element className
     * @param renderFunction - render function
     * @param defaultRenderFunction - default render function
     */
    PersonaBase.prototype._renderElement = function (classNames, renderFunction, defaultRenderFunction) {
        return (React.createElement("div", { dir: "auto", className: classNames }, renderFunction && renderFunction(this.props, defaultRenderFunction)));
    };
    /**
     * Deprecation helper for getting text.
     */
    PersonaBase.prototype._getText = function () {
        return this.props.text || this.props.primaryText || '';
    };
    /**
     * using closure to wrap the default render behavior
     * to make it independent of the type of text passed
     * @param text - text to render
     */
    PersonaBase.prototype._onRenderText = function (text) {
        // return default render behaviour for valid text or undefined
        return text
            ? function () {
                // default onRender behaviour
                return (React.createElement(Tooltip_1.TooltipHost, { content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent, directionalHint: Tooltip_1.DirectionalHint.topLeftEdge }, text));
            }
            : undefined;
    };
    PersonaBase.defaultProps = {
        size: Persona_types_1.PersonaSize.size48,
        presence: Persona_types_1.PersonaPresence.none,
        imageAlt: ''
    };
    return PersonaBase;
}(Utilities_1.BaseComponent));
exports.PersonaBase = PersonaBase;
//# sourceMappingURL=Persona.base.js.map