'use strict';

var React = require('react');
var ui_ContextMenu = require('./ContextMenu.js');
var ui_Icon = require('./Icon.js');
var ui_IconButton = require('./IconButton.js');
var ui_ImageRenderer = require('./ImageRenderer.js');
var ui_ReactionButton = require('./ReactionButton.js');
var index = require('../index-1b3c69da.js');
require('../_rollupPluginBabelHelpers-21ae158b.js');
require('react-dom');
require('./SortByRow.js');
require('../uuid-dee74248.js');
require('../index-2bfd366f.js');
require('prop-types');
require('../stringSet-7aebf034.js');
require('../utils/message/getOutgoingMessageState.js');
require('../useLongPress-83b6a2f1.js');
require('../MediaQueryContext-5d311a86.js');
require('../utils-6a748c02.js');

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

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

function MessageItemReactionMenu(_ref) {
  let {
    className,
    message,
    userId,
    spaceFromTrigger = {
      x: 0,
      y: 0
    },
    emojiContainer,
    toggleReaction,
    setSupposedHover
  } = _ref;
  const triggerRef = React.useRef(null);
  const containerRef = React.useRef(null);
  if (index.isPendingMessage(message) || index.isFailedMessage(message)) {
    return null;
  }
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: index.getClassName([className, 'sendbird-message-item-reaction-menu']),
    ref: containerRef
  }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
      className: "sendbird-message-item-reaction-menu__trigger",
      ref: triggerRef,
      width: "32px",
      height: "32px",
      onClick: () => {
        toggleDropdown();
        setSupposedHover(true);
      },
      onBlur: () => {
        setSupposedHover(false);
      }
    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
      className: "sendbird-message-item-reaction-menu__trigger__icon",
      type: ui_Icon.IconTypes.EMOJI_MORE,
      fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
      width: "24px",
      height: "24px"
    })),
    menuItems: close => {
      const closeDropdown = () => {
        close();
        setSupposedHover(false);
      };
      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
        parentRef: triggerRef,
        parentContainRef: containerRef,
        closeDropdown: closeDropdown,
        spaceFromTrigger: spaceFromTrigger
      }, index.getEmojiListAll(emojiContainer).map(emoji => {
        var _message$reactions, _message$reactions$fi, _message$reactions$fi2;
        const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.filter(reaction => reaction.key === emoji.key)[0]) === null || _message$reactions$fi === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions$fi.userIds) === null || _message$reactions$fi2 === void 0 ? void 0 : _message$reactions$fi2.some(reactorId => reactorId === userId);
        return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
          key: emoji.key,
          width: "36px",
          height: "36px",
          selected: isReacted,
          onClick: () => {
            closeDropdown();
            toggleReaction(message, emoji.key, isReacted);
          },
          dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
          url: 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 = MessageItemReactionMenu;
//# sourceMappingURL=MessageItemReactionMenu.js.map
