'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var neetoCist = require('@bigbinary/neeto-cist');
var classnames = require('classnames');
var Avatar = require('@bigbinary/neetoui/Avatar');
var jsxRuntime = require('react/jsx-runtime');
var index = require('./index-JY2zVpnv.js');
var Typography = require('@bigbinary/neetoui/Typography');
var DateFormat = require('./DateFormat.js');
var MoreDropdown = require('./MoreDropdown.js');
var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
var Tooltip = require('@bigbinary/neetoui/Tooltip');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var EmojiPicker = require('./EmojiPicker.js');
var injectCss = require('./inject-css-B6qYtOJe.js');
require('./_commonjsHelpers-BJu3ubxk.js');
require('@bigbinary/neeto-commons-frontend/react-utils/useTimer');
require('@bigbinary/neeto-commons-frontend/utils/datetime');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@bigbinary/neeto-icons/MenuHorizontal');
require('@bigbinary/neeto-icons/MenuVertical');
require('@bigbinary/neetoui/Button');
require('@bigbinary/neetoui/Dropdown');
require('@bigbinary/neeto-commons-frontend/react-utils');
require('@babel/runtime/helpers/slicedToArray');
require('@bigbinary/neeto-icons/SmileFaceGrey');
require('emoji-mart');
require('@tanstack/react-query');
require('axios');

var ActivityIcon = function ActivityIcon(_ref) {
  var icon = _ref.icon,
    unread = _ref.unread;
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: "mx-0.5 flex-shrink-0",
    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
      className: classnames("neeto-ui-bg-gray-200 neeto-ui-text-gray-600 neeto-ui-rounded-full neeto-molecules-activity-node-icon relative z-10 flex h-7 w-7 items-center justify-center p-1", {
        "neeto-ui-text-primary-600 neeto-ui-bg-primary-100": unread
      }),
      children: [icon, unread && /*#__PURE__*/jsxRuntime.jsx("span", {
        className: "neeto-ui-rounded-full neeto-ui-bg-primary-800 absolute -right-0.5 -top-0.5 h-2 w-2"
      })]
    })
  });
};

var Activity = function Activity(_ref) {
  var user = _ref.user,
    icon = _ref.icon,
    _ref$unread = _ref.unread,
    unread = _ref$unread === void 0 ? false : _ref$unread,
    className = _ref.className,
    children = _ref.children,
    userIcon = _ref.userIcon;
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: classnames("neeto-molecules-engagements-node relative -mt-4 flex items-center gap-2 px-4 py-4", className),
    children: [/*#__PURE__*/jsxRuntime.jsx(ActivityIcon, {
      icon: icon,
      unread: unread
    }), userIcon || /*#__PURE__*/jsxRuntime.jsx(Avatar, {
      size: "small",
      user: {
        name: user.name,
        imageUrl: user.profileImageUrl
      }
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-molecules-engagements-node__children",
      children: children
    })]
  });
};

var CommentHeader = function CommentHeader(_ref) {
  var user = _ref.user,
    comment = _ref.comment,
    info = _ref.info,
    actions = _ref.actions;
  var avatar = {
    name: user.name,
    imageUrl: user.profileImageUrl
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "neeto-ui-bg-gray-100 neeto-ui-border-gray-300 flex items-center justify-between rounded-t-md border-b py-1 pl-4 pr-1",
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "flex min-w-0 flex-grow flex-wrap items-center gap-2",
      children: [/*#__PURE__*/jsxRuntime.jsx(Avatar, {
        size: "medium",
        user: avatar
      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "neeto-ui-text-gray-700",
        style: "body2",
        weight: "semibold",
        children: user.name
      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "neeto-ui-text-gray-700",
        style: "body2",
        children: "\u2022"
      }), info && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
          className: "neeto-ui-text-gray-500 lowercase",
          style: "body2",
          children: info
        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
          className: "neeto-ui-text-gray-700",
          style: "body2",
          children: "\u2022"
        })]
      }), comment.createdAt && /*#__PURE__*/jsxRuntime.jsx(DateFormat.FromNow, {
        date: comment.createdAt,
        typographyProps: {
          style: "body2",
          className: "neeto-ui-text-gray-500"
        }
      })]
    }), neetoCist.isPresent(actions) && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
      dropdownButtonProps: {
        className: "self-start fles-shrink-0"
      },
      dropdownProps: {
        position: "bottom-start"
      },
      menuItems: actions
    })]
  });
};

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var findOwnIndex = neetoCist.findIndexBy({
  userId: initializers.globalProps.user.id
});
var groupReactions = ramda.collectBy(ramda.prop("unified"));
var Reactions = function Reactions(_ref) {
  var reactions = _ref.reactions,
    onAdd = _ref.onAdd,
    onRemove = _ref.onRemove;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var groups = groupReactions(reactions);
  var onSelect = function onSelect(emoji) {
    // Try to find group to which emoji belongs in existing reactions.
    var group = groups.find(ramda.pathEq(emoji.unified, [0, "unified"]));
    if (group && findOwnIndex(group) >= 0) return; // User already reacted with same emoji.
    onAdd(_objectSpread(_objectSpread({}, emoji), {}, {
      emoji: emoji["native"]
    }));
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "mt-2 flex flex-wrap gap-0.5",
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-ui-rounded-full neeto-ui-bg-gray-200 mr-2",
      children: /*#__PURE__*/jsxRuntime.jsx(EmojiPicker, {
        onSelect: onSelect
      })
    }), groups.map(function (reactions) {
      var ownIndex = findOwnIndex(reactions);
      var selected = ownIndex >= 0;
      var reaction = selected ? reactions[ownIndex] : reactions[0];
      var names = ramda.pluck("reactor", reactions).join(", ");
      return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
        position: "top",
        content: /*#__PURE__*/jsxRuntime.jsx("p", {
          className: "text-center text-xs",
          children: t("neetoMolecules.engagements.namesReacted", {
            names: names
          })
        }),
        children: /*#__PURE__*/jsxRuntime.jsx("div", {
          className: classnames("neeto-ui-rounded-full mx-1 flex cursor-pointer items-center justify-center px-2 py-1", {
            "neeto-ui-bg-accent-100": selected,
            "neeto-ui-bg-gray-100": !selected
          }),
          onClick: function onClick() {
            return (selected ? onRemove : onAdd)(reaction);
          },
          children: /*#__PURE__*/jsxRuntime.jsxs(Typography, {
            className: "flex items-center gap-x-1 text-sm",
            style: "body2",
            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
              className: "text-sm",
              children: reaction.emoji
            }), /*#__PURE__*/jsxRuntime.jsx("span", {
              className: "text-sm",
              children: reactions.length
            })]
          })
        })
      }, reaction.unified);
    })]
  });
};
var Reactions$1 = /*#__PURE__*/React.memo(Reactions, ramda.eqProps("reactions"));

var ENGAGEMENT_TYPES = {
  COMMENT: "comment",
  ACTIVITY: "activity"
};

var createCommentElementId = function createCommentElementId(comment) {
  return "neeto-molecules-engagement-comment--".concat(comment.id);
};
var defaultMatchType = function defaultMatchType(engagement) {
  if (engagement.commenter) return ENGAGEMENT_TYPES.COMMENT;else if (engagement.creator) return ENGAGEMENT_TYPES.ACTIVITY;
  return null;
};

var Comment = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var user = _ref.user,
    comment = _ref.comment,
    reactions = _ref.reactions,
    info = _ref.info,
    actions = _ref.actions,
    className = _ref.className,
    children = _ref.children,
    onAddReaction = _ref.onAddReaction,
    onRemoveReaction = _ref.onRemoveReaction;
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    ref: ref,
    id: createCommentElementId(comment),
    className: classnames("neeto-ui-bg-white neeto-ui-rounded-md neeto-ui-border-gray-300 neeto-molecules-comments-node mb-4 w-full border", className),
    children: [/*#__PURE__*/jsxRuntime.jsx(CommentHeader, {
      actions: actions,
      comment: comment,
      info: info,
      user: user
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "neeto-molecules-comments-node__inner p-4",
      children: [children, reactions !== false && /*#__PURE__*/jsxRuntime.jsx(Reactions$1, {
        reactions: reactions,
        onAdd: onAddReaction,
        onRemove: onRemoveReaction
      })]
    })]
  });
});
Comment.displayName = "Comment";
Comment.propTypes = {
  /** Object representing the user information  */
  user: index.PropTypes.shape({
    name: index.PropTypes.string.isRequired
  }).isRequired,
  /** Object representing the comment item.  */
  comment: index.PropTypes.shape({
    id: index.PropTypes.string.isRequired,
    createdAt: index.PropTypes.string.isRequired
  }).isRequired,
  /** Array of reactions. Settings this to `false` will disable reactions for the item  */
  reactions: index.PropTypes.oneOfType([index.PropTypes.array, index.PropTypes.bool]),
  /**  Optional text label to be displayed in the header. */
  info: index.PropTypes.string,
  /**  Optional action items to be passed to the menuItems prop of the actions dropdown */
  actions: index.PropTypes.arrayOf(index.PropTypes.shape({
    isVisible: index.PropTypes.bool,
    key: index.PropTypes.string.isRequired,
    label: index.PropTypes.string.isRequired,
    onClick: index.PropTypes.func.isRequired
  })),
  /**  Additional classes passed on to the board view. */
  className: index.PropTypes.string,
  /** Callback function triggered when a reaction (emoji) is added */
  onAddReaction: index.PropTypes.func,
  /** Callback function triggered when a reaction (emoji) is removed*/
  onRemoveReaction: index.PropTypes.func
};

var css = ".neeto-molecules-comments-node{position:relative}.neeto-molecules-comments-node:before{background-color:rgb(var(--neeto-ui-gray-200));content:\"\";height:1rem;left:31px;position:absolute;top:calc(100% + 1px);transform:translateX(-50%);width:2px}.neeto-molecules-engagements-node{position:relative}.neeto-molecules-engagements-node .neeto-ui-avatar__container{--neeto-ui-avatar-container-width:1.125rem;--neeto-ui-avatar-container-height:1.125rem;--neeto-ui-avatar-width:1.125rem;--neeto-ui-avatar-height:1.125rem}.neeto-molecules-engagements-node .neeto-ui-avatar__container>div{height:1.125rem;width:1.125rem}.neeto-molecules-engagements-node:before{background-color:rgb(var(--neeto-ui-gray-200));content:\"\";height:100%;left:32px;position:absolute;top:0;transform:translateX(-50%);width:2px}.neeto-molecules-activity-node-icon svg{height:16px;width:16px}";
injectCss.n(css,{});

var Engagements = function Engagements(_ref) {
  var data = _ref.data,
    _ref$isActivitiesEnab = _ref.isActivitiesEnabled,
    isActivitiesEnabled = _ref$isActivitiesEnab === void 0 ? false : _ref$isActivitiesEnab,
    _ref$matchType = _ref.matchType,
    matchType = _ref$matchType === void 0 ? defaultMatchType : _ref$matchType,
    renderComment = _ref.renderComment,
    renderActivity = _ref.renderActivity;
  var rendererHashmap = _defineProperty(_defineProperty({}, ENGAGEMENT_TYPES.COMMENT, renderComment), ENGAGEMENT_TYPES.ACTIVITY, isActivitiesEnabled ? renderActivity : neetoCist.noop);
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
    children: data.map(function (engagement, index) {
      var type = matchType(engagement);
      var renderer = rendererHashmap[type];
      if (!renderer) return null;
      return /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
        children: renderer(engagement, index)
      }, engagement.id);
    })
  });
};
Engagements.displayName = "Engagements";
Engagements.Comment = Comment;
Engagements.Activity = Activity;
Engagements.TYPES = ENGAGEMENT_TYPES;

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