'use strict';

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var classnames = require('classnames');
var neetoCist = require('@bigbinary/neeto-cist');
var Tooltip = require('@bigbinary/neetoui/Tooltip');
var Typography = require('@bigbinary/neetoui/Typography');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var jsxRuntime = require('react/jsx-runtime');

var groupBy = function groupBy(objectArray, groupKey) {
  return objectArray.reduce(function (data, obj) {
    (data[obj[groupKey]] = data[obj[groupKey]] || []).push(obj);
    return data;
  }, {});
};

var EmojiReactions = function EmojiReactions(_ref) {
  var isUpdating = _ref.isUpdating,
    reactions = _ref.reactions,
    _ref$onReactionClick = _ref.onReactionClick,
    onReactionClick = _ref$onReactionClick === void 0 ? neetoCist.noop : _ref$onReactionClick,
    _ref$emojiSize = _ref.emojiSize,
    emojiSize = _ref$emojiSize === void 0 ? "text-sm" : _ref$emojiSize,
    _ref$emojiBoxStyle = _ref.emojiBoxStyle,
    emojiBoxStyle = _ref$emojiBoxStyle === void 0 ? "neeto-ui-bg-white py-1 px-2" : _ref$emojiBoxStyle;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var groupedReactions = React.useMemo(function () {
    return groupBy(reactions || [], "unified");
  }, [reactions]);
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
    children: Object.entries(groupedReactions).map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        unified = _ref3[0],
        grouped = _ref3[1];
      var groupedNames = ramda.pluck("userName", reactions).join(", ");
      var reaction = grouped[0];
      return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
        position: "top",
        touch: ["hold", 500],
        content: /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col items-center justify-center",
          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
            className: "neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center",
            children: reaction["native"]
          }), /*#__PURE__*/jsxRuntime.jsx("p", {
            className: "text-center text-xs",
            children: t("neetoMolecules.reactions.content", {
              groupedNames: groupedNames
            })
          })]
        }),
        children: /*#__PURE__*/jsxRuntime.jsx("div", {
          "data-testid": "emoji-reactions-".concat(reaction.unified),
          className: classnames(["neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1", emojiBoxStyle], {
            "opacity-80": isUpdating
          }),
          onClick: function onClick() {
            return !isUpdating && onReactionClick({
              "native": reaction["native"],
              unified: reaction.unified
            }, grouped);
          },
          children: /*#__PURE__*/jsxRuntime.jsxs(Typography, {
            className: "flex items-center gap-x-2 text-sm",
            style: "body2",
            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
              className: emojiSize,
              children: reaction["native"]
            }), /*#__PURE__*/jsxRuntime.jsx("span", {
              children: grouped.length
            })]
          })
        })
      }, unified);
    })
  });
};

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