import React__default, { useContext, useRef } from 'react';
import Tooltip from './Tooltip.js';
import TooltipWrapper from './TooltipWrapper.js';
import ReactionBadge from './ReactionBadge.js';
import ReactionButton from './ReactionButton.js';
import ImageRenderer from './ImageRenderer.js';
import Icon, { IconTypes, IconColors } from './Icon.js';
import ContextMenu, { EmojiListItems } from './ContextMenu.js';
import { H as getEmojiMapAll, j as getClassName, I as isReactedBy, J as getEmojiTooltipString, y as getEmojiListAll } from '../index-dbe0e004.js';
import { a as LocalizationContext } from '../LocalizationContext-9c54e783.js';
import '../index-4111594a.js';
import 'prop-types';
import '../stringSet-1f18348a.js';
import '../_rollupPluginBabelHelpers-b2d9bfc5.js';
import 'react-dom';
import './SortByRow.js';
import '../uuid-48baadaf.js';
import '../utils/message/getOutgoingMessageState.js';
import '../index-a9ddd0f5.js';

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
  } = useContext(LocalizationContext);
  const emojisMap = getEmojiMapAll(emojiContainer);
  const addReactionRef = useRef(null);
  return /*#__PURE__*/React__default.createElement("div", {
    className: 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 = isReactedBy(userId, reaction);
    return /*#__PURE__*/React__default.createElement(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.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))
    }, /*#__PURE__*/React__default.createElement(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.createElement(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.createElement(Icon, {
        width: "20px",
        height: "20px",
        type: 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.createElement(ContextMenu, {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(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.createElement(Icon, {
      type: IconTypes.EMOJI_MORE,
      fillColor: IconColors.ON_BACKGROUND_3,
      width: "20px",
      height: "20px"
    })),
    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(EmojiListItems, {
      parentRef: addReactionRef,
      parentContainRef: addReactionRef,
      closeDropdown: closeDropdown,
      spacefromTrigger: spaceFromTrigger
    }, 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.createElement(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.createElement(ImageRenderer, {
        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
        width: "28px",
        height: "28px",
        placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
          style: style
        }, /*#__PURE__*/React__default.createElement(Icon, {
          type: IconTypes.QUESTION,
          fillColor: IconColors.ON_BACKGROUND_3,
          width: "28px",
          height: "28px"
        }))
      }));
    }))
  }));
};

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