import React__default from 'react';
import Avatar from './Avatar.js';
import Icon, { IconTypes, IconColors } from './Icon.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4105bc4d.js';
import { u as useLocalization } from '../LocalizationContext-426f3d58.js';
import { u as uuidv4 } from '../uuid-2e8efc75.js';
import './ImageRenderer.js';
import 'prop-types';
import '../stringSet-a62108b2.js';
import '../index-90420b99.js';

function ThreadReplies(_ref) {
  var _mostRepliedUsers$;
  let {
    className,
    threadInfo,
    onClick
  } = _ref;
  const {
    mostRepliedUsers = [],
    replyCount
  } = threadInfo;
  const {
    stringSet
  } = useLocalization();
  return /*#__PURE__*/React__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.createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles"
  }, mostRepliedUsers.slice(0, 4).map(user => {
    return /*#__PURE__*/React__default.createElement(Avatar, {
      key: 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.createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles__avatar"
  }, /*#__PURE__*/React__default.createElement(Avatar, {
    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.createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles__avatar__cover"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-ui-thread-replies__user-profiles__avatar__plus"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.PLUS,
    fillColor: IconColors.WHITE,
    width: "16px",
    height: "16px"
  })))), /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-ui-thread-replies__reply-counts",
    type: LabelTypography.CAPTION_2,
    color: LabelColors.PRIMARY
  }, replyCount === 1 ? `${replyCount} ${stringSet.CHANNEL__THREAD_REPLY}` : `${replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount} ${stringSet.CHANNEL__THREAD_REPLIES}`), /*#__PURE__*/React__default.createElement(Icon, {
    className: "sendbird-ui-thread-replies__icon",
    type: IconTypes.CHEVRON_RIGHT,
    fillColor: IconColors.PRIMARY,
    width: "16px",
    height: "16px"
  }));
}

export { ThreadReplies as default };
//# sourceMappingURL=ThreadReplies.js.map
