import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useMemo } from 'react';
import classnames from 'classnames';
import { noop } from '@bigbinary/neeto-cist';
import Tooltip from '@bigbinary/neetoui/Tooltip';
import Typography from '@bigbinary/neetoui/Typography';
import { pluck } from 'ramda';
import { useTranslation } from 'react-i18next';
import { jsx, Fragment, jsxs } from '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 ? 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 = useTranslation(),
    t = _useTranslation.t;
  var groupedReactions = useMemo(function () {
    return groupBy(reactions || [], "unified");
  }, [reactions]);
  return /*#__PURE__*/jsx(Fragment, {
    children: Object.entries(groupedReactions).map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        unified = _ref3[0],
        grouped = _ref3[1];
      var groupedNames = pluck("userName", reactions).join(", ");
      var reaction = grouped[0];
      return /*#__PURE__*/jsx(Tooltip, {
        position: "top",
        touch: ["hold", 500],
        content: /*#__PURE__*/jsxs("div", {
          className: "flex flex-col items-center justify-center",
          children: [/*#__PURE__*/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__*/jsx("p", {
            className: "text-center text-xs",
            children: t("neetoMolecules.reactions.content", {
              groupedNames: groupedNames
            })
          })]
        }),
        children: /*#__PURE__*/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__*/jsxs(Typography, {
            className: "flex items-center gap-x-2 text-sm",
            style: "body2",
            children: [/*#__PURE__*/jsx("span", {
              className: emojiSize,
              children: reaction["native"]
            }), /*#__PURE__*/jsx("span", {
              children: grouped.length
            })]
          })
        })
      }, unified);
    })
  });
};

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