'use strict';

var React = require('react');
var index$1 = require('../../index-892b4b7f.js');
var LocalizationContext = require('../../LocalizationContext-44d2f61b.js');
var ui_DateSeparator = require('../../ui/DateSeparator.js');
var ui_Label = require('../../index-2bfd366f.js');
var RemoveMessageModal = require('../../RemoveMessageModal-81daa8a0.js');
var ui_FileViewer = require('../../ui/FileViewer.js');
var Thread_context = require('../../ThreadProvider-bac1bea8.js');
var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
var ui_MessageInput = require('../../ui/MessageInput.js');
var Thread_context_types = require('../context/types.js');
var _const = require('../../const-bd02657f.js');
var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-21ae158b.js');
var ui_ContextMenu = require('../../ui/ContextMenu.js');
var ui_Avatar = require('../../ui/Avatar.js');
var UserProfileContext = require('../../UserProfileContext-9d843d68.js');
var ui_UserProfile = require('../../ui/UserProfile.js');
var ui_MessageItemMenu = require('../../ui/MessageItemMenu.js');
var ui_MessageItemReactionMenu = require('../../ui/MessageItemReactionMenu.js');
var index = require('../../index-1b3c69da.js');
var ui_MessageStatus = require('../../index-b6657c80.js');
var ui_EmojiReactions = require('../../ui/EmojiReactions.js');
var ui_TextMessageItemBody = require('../../ui/TextMessageItemBody.js');
var ui_OGMessageItemBody = require('../../ui/OGMessageItemBody.js');
var ui_FileMessageItemBody = require('../../ui/FileMessageItemBody.js');
var ui_ThumbnailMessageItemBody = require('../../ui/ThumbnailMessageItemBody.js');
var ui_UnknownMessageItemBody = require('../../ui/UnknownMessageItemBody.js');
var ui_VoiceMessageItemBody = require('../../ui/VoiceMessageItemBody.js');
var MediaQueryContext = require('../../MediaQueryContext-5d311a86.js');
var useLongPress = require('../../useLongPress-83b6a2f1.js');
var index$2 = require('../../index-78a1037e.js');
var types = require('../../types-df5bd4e5.js');
var useDirtyGetMentions = require('../../useDirtyGetMentions-1500af53.js');
var Channel_context = require('../../ChannelProvider-a05d259f.js');
require('../../index-88e8fdfa.js');
require('../../stringSet-7aebf034.js');
require('../../color-0c04efbd.js');
require('prop-types');
require('../../ui/Modal.js');
require('react-dom');
require('../../index-0a446cca.js');
require('../../ui/Button.js');
require('../../ui/Icon.js');
require('../../ui/IconButton.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../ui/ImageRenderer.js');
require('../../uuid-dee74248.js');
require('@sendbird/chat');
require('../../topics-373d2156.js');
require('@sendbird/chat/groupChannel');
require('@sendbird/chat/message');
require('../../consts-900e72b9.js');
require('../../withSendbird.js');
require('../../const-1ea78727.js');
require('../../compareIds-a846891d.js');
require('../../resolvedReplyType-14fa0f85.js');
require('dompurify');
require('../../consts-867f1ae6.js');
require('../../consts-b93ef9ea.js');
require('../../consts-bce71b24.js');
require('../../tokenize-44139f1e.js');
require('../../index.module-5a6a79b6.js');
require('../../ui/SortByRow.js');
require('../../sendbirdSelectors.js');
require('../../utils-6a748c02.js');
require('../../ui/ReactionButton.js');
require('../../ui/Loader.js');
require('../../index-24f791d1.js');
require('../../index-a3268370.js');
require('../../ui/ReactionBadge.js');
require('../../ui/BottomSheet.js');
require('../../ui/UserListItem.js');
require('../../ui/MutedAvatarOverlay.js');
require('../../ui/Checkbox.js');
require('../../ui/Tooltip.js');
require('../../ui/TooltipWrapper.js');
require('../../Message/context.js');
require('../../index-8cd9b25d.js');
require('../../ui/MentionLabel.js');
require('../../ui/LinkLabel.js');
require('../../ui/TextButton.js');
require('../../ui/ProgressBar.js');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../index-50c4a83b.js');
require('../../VoiceRecorder/context.js');
require('../../ui/PlaybackTime.js');

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

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

function ThreadListItemContent(_ref) {
  var _sender, _channel$members2, _channel$members2$fin, _message$reactions;
  let {
    className,
    userId,
    channel,
    message,
    disabled = false,
    chainTop = false,
    chainBottom = false,
    isMentionEnabled = false,
    isReactionEnabled = false,
    disableQuoteMessage = false,
    replyType,
    nicknamesMap,
    emojiContainer,
    showEdit,
    showRemove,
    showFileViewer,
    resendMessage,
    toggleReaction,
    onReplyInThread
  } = _ref;
  const messageTypes = index.getUIKitMessageTypes();
  const {
    isMobile
  } = MediaQueryContext.useMediaQueryContext();
  const {
    dateLocale
  } = LocalizationContext.useLocalization();
  const {
    config
  } = useSendbirdStateContext();
  const [supposedHover, setSupposedHover] = React.useState(false);
  const {
    disableUserProfile,
    renderUserProfile
  } = React.useContext(UserProfileContext.UserProfileContext);
  const avatarRef = React.useRef(null);
  const isByMe = userId === (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
  const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
  const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
  const isOgMessageEnabledInGroupChannel = channel.isGroupChannel() && config.groupChannel.enableOgtag;

  // Mobile
  const mobileMenuRef = React.useRef(null);
  const [showMobileMenu, setShowMobileMenu] = React.useState(false);
  const longPress = useLongPress.useLongPress({
    onLongPress: () => {
      if (isMobile) {
        setShowMobileMenu(true);
      }
    }
  }, {
    shouldPreventDefault: false
  });
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`,
    ref: mobileMenuRef
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
  }, !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
    menuTrigger: toggleDropdown => {
      var _channel$members, _channel$members$find, _message$sender2;
      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
        className: "sendbird-thread-list-item-content__left__avatar",
        src: (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : (_channel$members$find = _channel$members.find(member => {
          var _message$sender;
          return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
        })) === null || _channel$members$find === void 0 ? void 0 : _channel$members$find.profileUrl) || (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.profileUrl) || '',
        ref: avatarRef,
        width: "28px",
        height: "28px",
        onClick: () => {
          if (!disableUserProfile) {
            toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
          }
        }
      });
    },
    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
      parentRef: avatarRef,
      parentContainRef: avatarRef,
      closeDropdown: closeDropdown,
      style: {
        paddingTop: '0px',
        paddingBottom: '0px'
      }
    }, renderUserProfile ? renderUserProfile({
      user: message === null || message === void 0 ? void 0 : message.sender,
      close: closeDropdown
    }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
      user: message === null || message === void 0 ? void 0 : message.sender,
      onSuccess: closeDropdown
    }))
  }), isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'} ${supposedHoverClassName}`
  }, /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
    className: "sendbird-thread-list-item-content-menu__normal-menu",
    channel: channel,
    message: message,
    isByMe: isByMe,
    replyType: replyType,
    disabled: disabled,
    showEdit: showEdit,
    showRemove: showRemove,
    resendMessage: resendMessage,
    setSupposedHover: setSupposedHover,
    onReplyInThread: onReplyInThread
  }), isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
    className: "sendbird-thread-list-item-content-menu__reaction-menu",
    message: message,
    userId: userId,
    spaceFromTrigger: {},
    emojiContainer: emojiContainer,
    toggleReaction: toggleReaction,
    setSupposedHover: setSupposedHover
  }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
    className: "sendbird-thread-list-item-content__middle"
  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, longPress) : {}), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    className: "sendbird-thread-list-item-content__middle__sender-name",
    type: ui_Label.LabelTypography.CAPTION_2,
    color: ui_Label.LabelColors.ONBACKGROUND_2
  }, (channel === null || channel === void 0 ? void 0 : (_channel$members2 = channel.members) === null || _channel$members2 === void 0 ? void 0 : (_channel$members2$fin = _channel$members2.find(member => {
    var _message$sender3;
    return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.userId);
  })) === null || _channel$members2$fin === void 0 ? void 0 : _channel$members2$fin.nickname) || index.getSenderName(message)
  // TODO: Divide getting profileUrl logic to utils
  ), /*#__PURE__*/React__default["default"].createElement("div", {
    className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container'])
  }, isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement("div", {
    className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'left', supposedHoverClassName])
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-thread-list-item-content__middle__body-container__created-at__component-container"
  }, /*#__PURE__*/React__default["default"].createElement(ui_MessageStatus.MessageStatus, {
    message: message,
    channel: channel
  }))), isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? /*#__PURE__*/React__default["default"].createElement(ui_OGMessageItemBody, {
    className: "sendbird-thread-list-item-content__middle__message-item-body",
    message: message,
    isByMe: isByMe,
    isMentionEnabled: isMentionEnabled,
    isReactionEnabled: isReactionEnabledInChannel
  }) : index.isTextMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_TextMessageItemBody, {
    className: "sendbird-thread-list-item-content__middle__message-item-body",
    message: message,
    isByMe: isByMe,
    isMentionEnabled: isMentionEnabled,
    isReactionEnabled: isReactionEnabledInChannel
  }), index.isVoiceMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, {
    className: "sendbird-thread-list-item-content__middle__message-item-body",
    message: message,
    channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
    isByMe: isByMe,
    isReactionEnabled: isReactionEnabledInChannel
  }), index.getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default["default"].createElement(ui_FileMessageItemBody, {
    className: "sendbird-thread-list-item-content__middle__message-item-body",
    message: message,
    isByMe: isByMe,
    isReactionEnabled: isReactionEnabledInChannel,
    truncateLimit: isByMe ? 18 : 14
  }), index.isThumbnailMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_ThumbnailMessageItemBody, {
    className: "sendbird-thread-list-item-content__middle__message-item-body",
    message: message,
    isByMe: isByMe,
    isReactionEnabled: isReactionEnabledInChannel,
    showFileViewer: showFileViewer,
    style: {
      width: isMobile ? '100%' : '200px',
      height: '148px'
    }
  }), index.getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default["default"].createElement(ui_UnknownMessageItemBody, {
    className: "sendbird-thread-list-item-content__middle__message-item-body",
    message: message,
    isByMe: isByMe,
    isReactionEnabled: isReactionEnabledInChannel
  }), isReactionEnabledInChannel && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
    className: index.getClassName(['sendbird-thread-list-item-content-reactions', !isByMe || index.isThumbnailMessage(message) || isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? '' : 'primary'])
  }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
    userId: userId,
    message: message,
    channel: channel,
    isByMe: isByMe,
    emojiContainer: emojiContainer,
    memberNicknamesMap: nicknamesMap,
    toggleReaction: toggleReaction
  })), !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
    type: ui_Label.LabelTypography.CAPTION_3,
    color: ui_Label.LabelColors.ONBACKGROUND_2
  }, index$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
    locale: dateLocale
  })))), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
  }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-thread-list-item-content-menu ${supposedHoverClassName}`
  }, isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
    className: "sendbird-thread-list-item-content-menu__reaction-menu",
    message: message,
    userId: userId,
    spaceFromTrigger: {},
    emojiContainer: emojiContainer,
    toggleReaction: toggleReaction,
    setSupposedHover: setSupposedHover
  }), /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
    className: "sendbird-thread-list-item-content-menu__normal-menu",
    channel: channel,
    message: message,
    isByMe: isByMe,
    replyType: replyType,
    disabled: disabled,
    showRemove: showRemove,
    resendMessage: resendMessage,
    setSupposedHover: setSupposedHover,
    onReplyInThread: onReplyInThread
  }))), showMobileMenu && /*#__PURE__*/React__default["default"].createElement(index$2.MobileMenu, {
    parentRef: mobileMenuRef,
    channel: channel,
    message: message,
    userId: userId,
    replyType: replyType,
    hideMenu: () => {
      setShowMobileMenu(false);
    },
    isReactionEnabled: isReactionEnabled,
    isByMe: isByMe,
    emojiContainer: emojiContainer,
    showEdit: showEdit,
    showRemove: showRemove,
    toggleReaction: toggleReaction,
    isOpenedFromThread: true
  }));
}

function ThreadListItem(_ref) {
  var _stores$userStore, _stores$userStore$use, _message$reactions, _message$sender;
  let {
    className,
    message,
    chainTop,
    chainBottom,
    hasSeparator,
    renderCustomSeparator,
    handleScroll
  } = _ref;
  const {
    stores,
    config
  } = useSendbirdStateContext();
  const {
    isReactionEnabled,
    isMentionEnabled,
    isOnline,
    replyType,
    userMention,
    logger
  } = config;
  const userId = stores === null || stores === void 0 ? void 0 : (_stores$userStore = stores.userStore) === null || _stores$userStore === void 0 ? void 0 : (_stores$userStore$use = _stores$userStore.user) === null || _stores$userStore$use === void 0 ? void 0 : _stores$userStore$use.userId;
  const {
    dateLocale
  } = LocalizationContext.useLocalization();
  const threadContext = Thread_context.useThreadContext === null || Thread_context.useThreadContext === void 0 ? void 0 : Thread_context.useThreadContext();
  const {
    currentChannel,
    nicknamesMap,
    emojiContainer,
    toggleReaction,
    threadListState,
    updateMessage,
    resendMessage,
    deleteMessage,
    isMuted,
    isChannelFrozen
  } = threadContext;
  const openingMessage = threadContext === null || threadContext === void 0 ? void 0 : threadContext.message;
  const [showEdit, setShowEdit] = React.useState(false);
  const [showRemove, setShowRemove] = React.useState(false);
  const [showFileViewer, setShowFileViewer] = React.useState(false);
  const usingReaction = Channel_context.getIsReactionEnabled({
    globalLevel: isReactionEnabled,
    isSuper: currentChannel.isSuper,
    isBroadcast: currentChannel.isBroadcast
  });

  // Move to message
  const messageScrollRef = React.useRef(null);
  React.useLayoutEffect(() => {
    if ((openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.messageId) === (message === null || message === void 0 ? void 0 : message.messageId) && messageScrollRef !== null && messageScrollRef !== void 0 && messageScrollRef.current) {
      var _messageScrollRef$cur;
      (_messageScrollRef$cur = messageScrollRef.current) === null || _messageScrollRef$cur === void 0 ? void 0 : _messageScrollRef$cur.scrollIntoView({
        block: 'center',
        inline: 'center'
      });
    }
  }, [openingMessage, messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current]);

  // reactions
  React.useLayoutEffect(() => {
    handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
  }, [showEdit, message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length]);

  // mention
  const editMessageInputRef = React.useRef(null);
  const [mentionNickname, setMentionNickname] = React.useState('');
  const [mentionedUsers, setMentionedUsers] = React.useState([]);
  const [mentionedUserIds, setMentionedUserIds] = React.useState([]);
  const [messageInputEvent, setMessageInputEvent] = React.useState(null);
  const [selectedUser, setSelectedUser] = React.useState(null);
  const [mentionSuggestedUsers, setMentionSuggestedUsers] = React.useState([]);
  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === types.Role.OPERATOR));
  const mentionNodes = useDirtyGetMentions.useDirtyGetMentions({
    ref: editMessageInputRef
  }, {
    logger
  });
  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
  React.useEffect(() => {
    setMentionedUsers(mentionedUsers.filter(_ref2 => {
      let {
        userId
      } = _ref2;
      const i = mentionedUserIds.indexOf(userId);
      if (i < 0) {
        return false;
      } else {
        mentionedUserIds.splice(i, 1);
        return true;
      }
    }));
  }, [mentionedUserIds]);

  // edit input
  const disabled = !(threadListState === Thread_context_types.ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;

  // memorize
  const MemorizedSeparator = React.useMemo(() => {
    if (typeof renderCustomSeparator === 'function') {
      return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
        message
      });
    }
  }, [message, renderCustomSeparator]);

  // Edit message
  if (showEdit && message.isUserMessage()) {
    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
      targetNickname: mentionNickname,
      inputEvent: messageInputEvent
      // renderUserMentionItem={renderUserMentionItem}
      ,
      onUserItemClick: user => {
        if (user) {
          setMentionedUsers([...mentionedUsers, user]);
        }
        setMentionNickname('');
        setSelectedUser(user);
        setMessageInputEvent(null);
      },
      onFocusItemChange: () => {
        setMessageInputEvent(null);
      },
      onFetchUsers: users => {
        setMentionSuggestedUsers(users);
      },
      ableAddMention: ableMention,
      maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
      maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
    }), /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
      isEdit: true,
      channel: currentChannel,
      disabled: disabled,
      ref: editMessageInputRef,
      mentionSelectedUser: selectedUser,
      isMentionEnabled: isMentionEnabled,
      message: message,
      onStartTyping: () => {
        var _currentChannel$start;
        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$start = currentChannel.startTyping) === null || _currentChannel$start === void 0 ? void 0 : _currentChannel$start.call(currentChannel);
      },
      onUpdateMessage: _ref3 => {
        var _currentChannel$endTy;
        let {
          messageId,
          message,
          mentionTemplate
        } = _ref3;
        updateMessage({
          messageId,
          message,
          mentionedUsers,
          mentionTemplate
        });
        setShowEdit(false);
        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy = currentChannel.endTyping) === null || _currentChannel$endTy === void 0 ? void 0 : _currentChannel$endTy.call(currentChannel);
      },
      onCancelEdit: () => {
        var _currentChannel$endTy2;
        setMentionNickname('');
        setMentionedUsers([]);
        setMentionedUserIds([]);
        setMentionSuggestedUsers([]);
        setShowEdit(false);
        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy2 = currentChannel.endTyping) === null || _currentChannel$endTy2 === void 0 ? void 0 : _currentChannel$endTy2.call(currentChannel);
      },
      onUserMentioned: user => {
        if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
          setSelectedUser(null);
          setMentionNickname('');
        }
      },
      onMentionStringChange: mentionText => {
        setMentionNickname(mentionText);
      },
      onMentionedUserIdsUpdated: userIds => {
        setMentionedUserIds(userIds);
      },
      onKeyDown: e => {
        if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === _const.MessageInputKeys.Enter && ableMention || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
          setMessageInputEvent(e);
          return true;
        }
        return false;
      }
    }));
  }
  return /*#__PURE__*/React__default["default"].createElement("div", {
    ref: messageScrollRef,
    className: `sendbird-thread-list-item ${className}`
  }, hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && (MemorizedSeparator || /*#__PURE__*/React__default["default"].createElement(ui_DateSeparator, null, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    type: ui_Label.LabelTypography.CAPTION_2,
    color: ui_Label.LabelColors.ONBACKGROUND_2
  }, index$1.format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMM dd, yyyy', {
    locale: dateLocale
  })))), /*#__PURE__*/React__default["default"].createElement(ThreadListItemContent, {
    userId: userId,
    channel: currentChannel,
    message: message,
    chainTop: chainTop,
    chainBottom: chainBottom,
    isReactionEnabled: usingReaction,
    isMentionEnabled: isMentionEnabled,
    disableQuoteMessage: true,
    replyType: replyType,
    nicknamesMap: nicknamesMap,
    emojiContainer: emojiContainer,
    resendMessage: resendMessage,
    showRemove: setShowRemove,
    showFileViewer: setShowFileViewer,
    toggleReaction: toggleReaction,
    showEdit: setShowEdit
  }), showRemove && /*#__PURE__*/React__default["default"].createElement(RemoveMessageModal.RemoveMessage, {
    message: message,
    onCancel: () => setShowRemove(false)
  }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(ui_FileViewer["default"], {
    message: message,
    isByMe: (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId,
    onClose: () => setShowFileViewer(false),
    onDelete: () => {
      deleteMessage(message);
      setShowFileViewer(false);
    }
  }));
}

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