'use strict';

var React = require('react');
var ui_Tooltip = require('./Tooltip.js');
var ui_TooltipWrapper = require('./TooltipWrapper.js');
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-f2146bae.js');
var LocalizationContext = require('../LocalizationContext-af96cf5f.js');
require('../index-73643285.js');
require('prop-types');
require('../stringSet-68748705.js');
require('../_rollupPluginBabelHelpers-c5955c81.js');
require('react-dom');
require('./SortByRow.js');
require('../uuid-0b4ed44c.js');
require('../utils/message/getOutgoingMessageState.js');
require('../index-83d1d15e.js');

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

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

const EmojiReactions = _ref => {
  var _message$reactions, _message$reactions2;
  let {
    className,
    userId,
    message,
    emojiContainer,
    memberNicknamesMap,
    spaceFromTrigger = {
      x: 0,
      y: 0
    },
    isByMe = false,
    toggleReaction
  } = _ref;
  const {
    stringSet
  } = React.useContext(LocalizationContext.LocalizationContext);
  const emojisMap = index.getEmojiMapAll(emojiContainer);
  const addReactionRef = React.useRef(null);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: index.getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
  }, (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && message.reactions.map(reaction => {
    var _reaction$userIds, _emojisMap$get;
    const reactedByMe = index.isReactedBy(userId, reaction);
    return /*#__PURE__*/React__default["default"].createElement(ui_TooltipWrapper, {
      className: "sendbird-emoji-reactions__reaction-badge",
      key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
      hoverTooltip: (reaction === null || reaction === void 0 ? void 0 : (_reaction$userIds = reaction.userIds) === null || _reaction$userIds === void 0 ? void 0 : _reaction$userIds.length) > 0 && /*#__PURE__*/React__default["default"].createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))
    }, /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
      count: reaction.userIds.length,
      selected: reactedByMe,
      onClick: e => {
        var _e$stopPropagation;
        toggleReaction(message, reaction.key, reactedByMe);
        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_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
      })
    })));
  }), (message === null || message === void 0 ? void 0 : (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) < emojisMap.size && /*#__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$stopPropagation2;
        toggleDropdown();
        e === null || e === void 0 ? void 0 : (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.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$reactions3, _message$reactions3$f, _message$reactions3$f2;
      const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : (_message$reactions3$f = _message$reactions3.find(reaction => reaction.key === emoji.key)) === null || _message$reactions3$f === void 0 ? void 0 : (_message$reactions3$f2 = _message$reactions3$f.userIds) === null || _message$reactions3$f2 === void 0 ? void 0 : _message$reactions3$f2.some(reactorId => reactorId === userId);
      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
        key: emoji.key,
        width: "36px",
        height: "36px",
        selected: isReacted,
        onClick: e => {
          closeDropdown();
          toggleReaction(message, emoji.key, isReacted);
          e === null || e === void 0 ? void 0 : e.stopPropagation();
        }
      }, /*#__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"
        }))
      }));
    }))
  }));
};

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