define(["require", "exports", "tslib", "react", "../../Utilities", "./ActivityItem.classNames", "./ActivityItem.styles", "office-ui-fabric-react/lib/Persona", "office-ui-fabric-react/lib/PersonaCoin"], function (require, exports, tslib_1, React, Utilities_1, ActivityItem_classNames_1, ActivityItem_styles_1, Persona_1, PersonaCoin_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ActivityItem = (function (_super) {
        tslib_1.__extends(ActivityItem, _super);
        function ActivityItem(props) {
            return _super.call(this, props) || this;
        }
        ActivityItem.prototype.render = function () {
            var _a = this.props, _b = _a.onRenderIcon, onRenderIcon = _b === void 0 ? this._onRenderIcon : _b, _c = _a.onRenderActivityDescription, onRenderActivityDescription = _c === void 0 ? this._onRenderActivityDescription : _c, _d = _a.onRenderComments, onRenderComments = _d === void 0 ? this._onRenderComments : _d, _e = _a.onRenderTimeStamp, onRenderTimeStamp = _e === void 0 ? this._onRenderTimeStamp : _e, customStyles = _a.styles;
            this._styles = ActivityItem_styles_1.getStyles(undefined, customStyles);
            this._classNames = ActivityItem_classNames_1.getClassNames(this._styles, this.props.className, this.props.activityPersonas, this.props.isCompact);
            return (React.createElement("div", { className: this._classNames.root, style: this.props.style },
                (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) &&
                    React.createElement("div", { className: this._classNames.activityTypeIcon }, onRenderIcon(this.props)),
                React.createElement("div", { className: this._classNames.activityContent },
                    onRenderActivityDescription(this.props, this._onRenderActivityDescription),
                    onRenderComments(this.props, this._onRenderComments),
                    onRenderTimeStamp(this.props, this._onRenderTimeStamp))));
        };
        ActivityItem.prototype._onRenderIcon = function (props) {
            if (props.activityPersonas) {
                return this._onRenderPersonaArray(props);
            }
            else {
                return this.props.activityIcon;
            }
        };
        ActivityItem.prototype._onRenderActivityDescription = function (props) {
            var activityDescription = props.activityDescription || props.activityDescriptionText;
            if (activityDescription) {
                return (React.createElement("span", { className: this._classNames.activityText }, activityDescription));
            }
            return null;
        };
        ActivityItem.prototype._onRenderComments = function (props) {
            var comments = props.comments || props.commentText;
            if (!props.isCompact && comments) {
                return (React.createElement("div", { className: this._classNames.commentText }, comments));
            }
            return null;
        };
        ActivityItem.prototype._onRenderTimeStamp = function (props) {
            if (!props.isCompact && props.timeStamp) {
                return (React.createElement("div", { className: this._classNames.timeStamp }, props.timeStamp));
            }
            return null;
        };
        // If activityPersonas is an array of persona props, build the persona cluster element.
        ActivityItem.prototype._onRenderPersonaArray = function (props) {
            var _this = this;
            var personaElement = null;
            var activityPersonas = props.activityPersonas;
            if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
                var personaList_1 = [];
                var showSize16Personas_1 = (activityPersonas.length > 1 || props.isCompact);
                var personaLimit_1 = props.isCompact ? 3 : 4;
                var style_1 = undefined;
                if (props.isCompact) {
                    style_1 = {
                        display: 'inline-block',
                        width: '8px',
                        minWidth: '8px',
                        overflow: 'visible'
                    };
                }
                activityPersonas.filter(function (person, index) { return index < personaLimit_1; }).forEach(function (person, index) {
                    personaList_1.push(React.createElement(PersonaCoin_1.PersonaCoin, tslib_1.__assign({}, person, { 
                        // tslint:disable-next-line:no-string-literal
                        key: person['key'] ? person['key'] : index, className: _this._classNames.activityPersona, size: showSize16Personas_1 ? Persona_1.PersonaSize.size16 : Persona_1.PersonaSize.extraSmall, style: style_1 })));
                });
                personaElement = React.createElement("div", { className: this._classNames.personaContainer }, personaList_1);
            }
            return personaElement;
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ActivityItem.prototype, "_onRenderIcon", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ActivityItem.prototype, "_onRenderActivityDescription", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ActivityItem.prototype, "_onRenderComments", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ActivityItem.prototype, "_onRenderTimeStamp", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ActivityItem.prototype, "_onRenderPersonaArray", null);
        return ActivityItem;
    }(Utilities_1.BaseComponent));
    exports.ActivityItem = ActivityItem;
});
//# sourceMappingURL=ActivityItem.js.map