import { __extends, __assign, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent.js';
import { getStyles } from './ActivityItem.styles.js';
import { getClassNames } from './ActivityItem.classNames.js';
import { PersonaCoin } from '../Persona/PersonaCoin/index.js';
import { PersonaSize } from '../Persona/Persona.types.js';

var ActivityItem = function(_super) {
  __extends(ActivityItem2, _super);
  function ActivityItem2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.PersonaSize = PersonaSize;
    return _this;
  }
  Object.defineProperty(ActivityItem2.prototype, "personaStyle", {
    get: function() {
      if (!this.isCompact)
        return {};
      return {
        display: "inline-block",
        width: "10px",
        minWidth: "10px",
        overflow: "visible"
      };
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(ActivityItem2.prototype, "personasToRender", {
    get: function() {
      var personaLimit = this.isCompact ? 3 : 4;
      return this.activityPersonas.filter(function(person, index) {
        return index < personaLimit;
      });
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(ActivityItem2.prototype, "classNames", {
    get: function() {
      var _a = this, styles = _a.styles, theme = _a.theme, className = _a.className, activityPersonas = _a.activityPersonas, animateBeaconSignal = _a.animateBeaconSignal, beaconColorOne = _a.beaconColorOne, beaconColorTwo = _a.beaconColorTwo, isCompact = _a.isCompact;
      return getClassNames(getStyles(theme, styles, animateBeaconSignal, beaconColorOne, beaconColorTwo, isCompact), className, activityPersonas, isCompact);
    },
    enumerable: false,
    configurable: true
  });
  ActivityItem2.prototype.render = function(h) {
    var _a = this, classNames = _a.classNames, activityPersonas = _a.activityPersonas, animateBeaconSignal = _a.animateBeaconSignal, isCompact = _a.isCompact, personasToRender = _a.personasToRender, personaStyle = _a.personaStyle;
    var $activityDescription = this.$slots.activityDescription && h("span", {
      class: classNames.activityText
    }, this.$slots.activityDescription);
    var $commentText = !isCompact && this.$slots.comments && h("div", {
      class: classNames.commentText
    }, this.$slots.comments);
    var $timeStamp = !isCompact && this.$slots.timeStamp && h("div", {
      class: classNames.timeStamp
    }, this.$slots.timeStamp);
    var $activityContent = h("div", { class: classNames.activityContent }, [
      $activityDescription,
      $commentText,
      $timeStamp
    ]);
    var $activityTypeIcon = (activityPersonas || this.$slots.icon) && h("div", { class: classNames.activityTypeIcon }, [
      animateBeaconSignal && isCompact && h("div", {
        class: classNames.pulsingBeacon
      }),
      activityPersonas.length > 0 && h("div", {
        class: classNames.personaContainer
      }, personasToRender.map(function(person, index) {
        return h(PersonaCoin, {
          props: __assign(__assign({}, person), { size: activityPersonas.length > 1 || isCompact ? PersonaSize.size16 : PersonaSize.size32 }),
          key: person.key || index,
          class: classNames.activityPersona,
          style: personaStyle
        });
      })),
      this.$slots.icon
    ]);
    return h("div", {
      class: classNames.root
    }, [
      $activityTypeIcon,
      $activityContent
    ]);
  };
  __decorate([
    Prop({ type: Array, default: function() {
      return [];
    } }),
    __metadata("design:type", Array)
  ], ActivityItem2.prototype, "activityPersonas", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ActivityItem2.prototype, "animateBeaconSignal", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], ActivityItem2.prototype, "beaconColorOne", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], ActivityItem2.prototype, "beaconColorTwo", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ActivityItem2.prototype, "isCompact", void 0);
  ActivityItem2 = __decorate([
    Component
  ], ActivityItem2);
  return ActivityItem2;
}(BaseComponent);

export { ActivityItem };
