'use strict';

var React = require('react');
var ui_ReactionBadge = require('./ReactionBadge.js');
var ui_ReactionButton = require('./ReactionButton.js');
var ui_ImageRenderer = require('./ImageRenderer.js');
var ui_Icon = require('./Icon.js');
var ui_ContextMenu = require('./ContextMenu.js');
var index = require('../index-1b3c69da.js');
var ui_BottomSheet = require('./BottomSheet.js');
var ui_Label = require('../index-2bfd366f.js');
var ui_UserListItem = require('./UserListItem.js');
var ui_Tooltip = require('./Tooltip.js');
var ui_TooltipWrapper = require('./TooltipWrapper.js');
var MediaQueryContext = require('../MediaQueryContext-5d311a86.js');
var useLongPress = require('../useLongPress-83b6a2f1.js');
var LocalizationContext = require('../LocalizationContext-44d2f61b.js');
var useSendbirdStateContext = require('../useSendbirdStateContext.js');
var Message_context = require('../Message/context.js');
var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-21ae158b.js');
require('../utils-6a748c02.js');
require('prop-types');
require('react-dom');
require('./SortByRow.js');
require('../uuid-dee74248.js');
require('../utils/message/getOutgoingMessageState.js');
require('../stringSet-7aebf034.js');
require('../index-0a446cca.js');
require('../UserProfileContext-9d843d68.js');
require('./Avatar.js');
require('./MutedAvatarOverlay.js');
require('./Checkbox.js');
require('./UserProfile.js');
require('../sendbirdSelectors.js');
require('../topics-373d2156.js');
require('./Button.js');
require('../index-88e8fdfa.js');
require('../withSendbird.js');

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

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

const ReactedMembersBottomSheet = _ref => {
  var _message$reactions, _message$reactions2, _message$reactions2$f;
  let {
    message,
    channel,
    emojiKey = '',
    hideMenu,
    emojiContainer
  } = _ref;
  const {
    members = []
  } = channel;
  const [selectedEmoji, setSelectedEmoji] = React.useState(emojiKey);
  return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
    onBackdropClick: hideMenu
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-message__bottomsheet"
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-message__bottomsheet__reacted-members"
  }, (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.map(reaction => {
    const emojiUrl = index.getEmojiUrl(emojiContainer, reaction.key);
    return /*#__PURE__*/React__default["default"].createElement("div", {
      key: reaction.key,
      className: `
                  sendbird-message__bottomsheet__reacted-members__item
                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}
                `,
      onClick: () => {
        setSelectedEmoji(reaction.key);
      }
    }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
      url: emojiUrl,
      width: "28px",
      height: "28px",
      placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
        style: style
      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
        type: ui_Icon.IconTypes.QUESTION,
        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
        width: "28px",
        height: "28px"
      }))
    }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
      type: ui_Label.LabelTypography.BUTTON_2,
      color: selectedEmoji === reaction.key ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3
    }, reaction.userIds.length));
  })), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-message__bottomsheet__reactor-list"
  },
  // making a member list who reacted to the message with the `selectedEmoji`
  ((_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : (_message$reactions2$f = _message$reactions2.find(reaction => reaction.key === selectedEmoji)) === null || _message$reactions2$f === void 0 ? void 0 : _message$reactions2$f.userIds.map(userId => members.find(member => member.userId === userId)).filter(member => member !== undefined)).map(member => /*#__PURE__*/React__default["default"].createElement(ui_UserListItem, {
    key: member.userId,
    className: "sendbird-message__bottomsheet__reactor-list__item",
    user: member,
    avatarSize: "36px"
  })))));
};

function ReactionItem(_ref) {
  var _emojisMap$get;
  let {
    reaction,
    memberNicknamesMap,
    setEmojiKey,
    toggleReaction,
    emojisMap,
    channel
  } = _ref;
  const store = useSendbirdStateContext();
  const {
    isMobile
  } = MediaQueryContext.useMediaQueryContext();
  const messageStore = Message_context.useMessageContext();
  const message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
  const {
    stringSet
  } = React.useContext(LocalizationContext.LocalizationContext);
  const userId = store.config.userId;
  const reactedByMe = index.isReactedBy(userId, reaction);
  const showHoverTooltip = reaction.userIds.length > 0 && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !channel.isSuper;
  const handleOnClick = () => {
    setEmojiKey('');
    toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, reaction.key, reactedByMe);
  };
  const longPress = useLongPress.useLongPress({
    onLongPress: () => {
      setEmojiKey(reaction.key);
    },
    onClick: handleOnClick
  }, {
    shouldPreventDefault: true,
    shouldStopPropagation: true
  });
  return /*#__PURE__*/React__default["default"].createElement(ui_TooltipWrapper, {
    className: "sendbird-emoji-reactions__reaction-badge",
    hoverTooltip: showHoverTooltip ? /*#__PURE__*/React__default["default"].createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null)
  }, /*#__PURE__*/React__default["default"].createElement("div", isMobile ? longPress : {
    onClick: handleOnClick
  }, /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
    count: reaction.userIds.length,
    selected: reactedByMe
  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
    circle: true,
    url: ((_emojisMap$get = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _emojisMap$get === void 0 ? void 0 : _emojisMap$get.url) || '',
    width: "20px",
    height: "20px",
    defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
      width: "20px",
      height: "20px",
      type: ui_Icon.IconTypes.QUESTION
    })
  }))));
}

const AddReactionBadgeItem = _ref => {
  let {
    onClick
  } = _ref;
  const onlyClick = useLongPress.useLongPress({
    onLongPress: () => {/* noop */},
    onClick
  }, {
    shouldPreventDefault: true,
    shouldStopPropagation: true
  });
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
    className: "sendbird-emoji-reactions__add-reaction-badge"
  }, onlyClick), /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
    isAdd: true
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.EMOJI_MORE,
    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
    width: "20px",
    height: "20px"
  })));
};

const MobileEmojisBottomSheet = _ref => {
  let {
    userId,
    message,
    emojiContainer,
    hideMenu,
    toggleReaction
  } = _ref;
  const emojiAllList = React.useMemo(() => {
    return index.getEmojiListAll(emojiContainer);
  }, [emojiContainer]);
  return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
    onBackdropClick: hideMenu
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet"
  }, emojiAllList.map(emoji => {
    var _message$reactions$fi, _message$reactions, _message$reactions$fi2, _message$reactions$fi3;
    const isReacted = (_message$reactions$fi = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions.find(reaction => reaction.key === emoji.key)) === null || _message$reactions$fi2 === void 0 ? void 0 : (_message$reactions$fi3 = _message$reactions$fi2.userIds) === null || _message$reactions$fi3 === void 0 ? void 0 : _message$reactions$fi3.some(reactorId => reactorId === userId)) !== null && _message$reactions$fi !== void 0 ? _message$reactions$fi : false;
    return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
      key: emoji.key,
      width: "44px",
      height: "44px",
      selected: isReacted,
      onClick: e => {
        e === null || e === void 0 ? void 0 : e.stopPropagation();
        toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
        hideMenu();
      },
      dataSbId: `ui_mobile_emoji_reactions_menu_${emoji.key}`
    }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
      url: emoji.url,
      width: "38px",
      height: "38px",
      placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
        style: style
      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
        type: ui_Icon.IconTypes.QUESTION,
        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
        width: "28px",
        height: "28px"
      }))
    }));
  })));
};

const EmojiReactions = _ref => {
  var _message$reactions$le, _message$reactions, _message$reactions$le2, _message$reactions2, _message$reactions3;
  let {
    className = '',
    userId,
    message,
    channel,
    emojiContainer,
    memberNicknamesMap,
    spaceFromTrigger = {
      x: 0,
      y: 0
    },
    isByMe = false,
    toggleReaction
  } = _ref;
  const {
    isMobile
  } = MediaQueryContext.useMediaQueryContext();
  const addReactionRef = React.useRef(null);
  const [showEmojiList, setShowEmojiList] = React.useState(false);
  const [selectedEmojiKey, setSelectedEmojiKey] = React.useState('');
  const emojisMap = index.getEmojiMapAll(emojiContainer);
  const showAddReactionBadge = ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) < emojisMap.size;
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: index.getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
  }, ((_message$reactions$le2 = (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) !== null && _message$reactions$le2 !== void 0 ? _message$reactions$le2 : 0) > 0 && ((_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : _message$reactions3.map(reaction => {
    return /*#__PURE__*/React__default["default"].createElement(ReactionItem, {
      key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
      reaction: reaction,
      memberNicknamesMap: memberNicknamesMap,
      setEmojiKey: setSelectedEmojiKey,
      toggleReaction: toggleReaction,
      emojisMap: emojisMap,
      channel: channel
    });
  })), !isMobile && showAddReactionBadge && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
      className: "sendbird-emoji-reactions__add-reaction-badge",
      ref: addReactionRef,
      isAdd: true,
      onClick: e => {
        var _e$stopPropagation;
        toggleDropdown();
        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
      }
    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
      type: ui_Icon.IconTypes.EMOJI_MORE,
      fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
      width: "20px",
      height: "20px"
    })),
    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
      parentRef: addReactionRef,
      parentContainRef: addReactionRef,
      closeDropdown: closeDropdown,
      spaceFromTrigger: spaceFromTrigger
    }, index.getEmojiListAll(emojiContainer).map(emoji => {
      var _message$reactions4, _message$reactions4$f, _message$reactions4$f2;
      const isReacted = (message === null || message === void 0 ? void 0 : (_message$reactions4 = message.reactions) === null || _message$reactions4 === void 0 ? void 0 : (_message$reactions4$f = _message$reactions4.find(reaction => reaction.key === emoji.key)) === null || _message$reactions4$f === void 0 ? void 0 : (_message$reactions4$f2 = _message$reactions4$f.userIds) === null || _message$reactions4$f2 === void 0 ? void 0 : _message$reactions4$f2.some(reactorId => reactorId === userId)) || false;
      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
        key: emoji.key,
        width: "36px",
        height: "36px",
        selected: isReacted,
        onClick: e => {
          closeDropdown();
          toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
          e === null || e === void 0 ? void 0 : e.stopPropagation();
        },
        dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
        width: "28px",
        height: "28px",
        placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
          style: style
        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
          type: ui_Icon.IconTypes.QUESTION,
          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
          width: "28px",
          height: "28px"
        }))
      }));
    }))
  }), isMobile && showAddReactionBadge && /*#__PURE__*/React__default["default"].createElement(AddReactionBadgeItem, {
    onClick: () => {
      setShowEmojiList(true);
    }
  }), isMobile && showEmojiList && /*#__PURE__*/React__default["default"].createElement(MobileEmojisBottomSheet, {
    userId: userId,
    message: message,
    emojiContainer: emojiContainer,
    hideMenu: () => {
      setShowEmojiList(false);
    },
    toggleReaction: toggleReaction
  }), isMobile && selectedEmojiKey && channel !== null && /*#__PURE__*/React__default["default"].createElement(ReactedMembersBottomSheet, {
    message: message,
    channel: channel,
    emojiKey: selectedEmojiKey,
    hideMenu: () => {
      setSelectedEmojiKey('');
    },
    emojiContainer: emojiContainer
  }));
};

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