'use strict';

var React = require('react');
var ui_Avatar = require('./Avatar.js');
var ui_Icon = require('./Icon.js');
var ui_Label = require('../index-35633fb6.js');
var LocalizationContext = require('../LocalizationContext-8cc9717d.js');
var uuid = require('../uuid-1eceb0c8.js');
require('./ImageRenderer.js');
require('prop-types');
require('../stringSet-ce782136.js');
require('../index-d749c4c2.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function ThreadReplies(_ref) {
  var _mostRepliedUsers$;
  let {
    className,
    threadInfo,
    onClick
  } = _ref;
  const {
    mostRepliedUsers = [],
    replyCount
  } = threadInfo;
  const {
    stringSet
  } = LocalizationContext.useLocalization();
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-ui-thread-replies ${className}`,
    role: "button",
    onClick: e => {
      onClick(e);
      e === null || e === void 0 ? void 0 : e.stopPropagation();
    },
    onKeyDown: e => {
      onClick(e);
      e === null || e === void 0 ? void 0 : e.stopPropagation();
    }
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles"
  }, mostRepliedUsers.slice(0, 4).map(user => {
    return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
      key: uuid.uuidv4(),
      className: "sendbird-ui-thread-replies__user-profiles__avatar",
      src: user === null || user === void 0 ? void 0 : user.profileUrl,
      alt: "user profile",
      width: "20px",
      height: "20px"
    });
  }), (mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers.length) >= 5 && /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles__avatar"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
    className: "sendbird-ui-thread-replies__user-profiles__avatar__image",
    src: mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : (_mostRepliedUsers$ = mostRepliedUsers[4]) === null || _mostRepliedUsers$ === void 0 ? void 0 : _mostRepliedUsers$.profileUrl,
    alt: "user profile",
    width: "20px",
    height: "20px"
  }), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles__avatar__cover"
  }), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles__avatar__plus"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.PLUS,
    fillColor: ui_Icon.IconColors.WHITE,
    width: "16px",
    height: "16px"
  })))), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    className: "sendbird-ui-thread-replies__reply-counts",
    type: ui_Label.LabelTypography.CAPTION_2,
    color: ui_Label.LabelColors.PRIMARY
  }, replyCount === 1 ? `${replyCount} ${stringSet.CHANNEL__THREAD_REPLY}` : `${replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount} ${stringSet.CHANNEL__THREAD_REPLIES}`), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    className: "sendbird-ui-thread-replies__icon",
    type: ui_Icon.IconTypes.CHEVRON_RIGHT,
    fillColor: ui_Icon.IconColors.PRIMARY,
    width: "16px",
    height: "16px"
  }));
}

module.exports = ThreadReplies;
//# sourceMappingURL=ThreadReplies.js.map
