'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var neetoCist = require('@bigbinary/neeto-cist');
var neetoAtoms = require('@bigbinary/neeto-atoms');
var classnames = require('classnames');
var jsxRuntime = require('react/jsx-runtime');
var index = require('../index-JY2zVpnv.js');
var v2_DateFormat = require('./DateFormat.js');
var v2_MoreDropdown = require('./MoreDropdown.js');
var initializers = require('@bigbinary/neeto-commons-frontend/v2/initializers');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var v2_EmojiPicker = require('./EmojiPicker.js');
require('../_commonjsHelpers-BJu3ubxk.js');
require('@bigbinary/neeto-commons-frontend/v2/react-utils/useTimer');
require('@bigbinary/neeto-commons-frontend/v2/utils/datetime');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@bigbinary/neeto-commons-frontend/v2/react-utils');
require('../createLucideIcon-DBDhE7kE.js');
require('../ellipsis-BcfLTtl5.js');
require('@babel/runtime/helpers/slicedToArray');
require('@bigbinary/neeto-atoms/primitives');
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: "bg-card relative z-10 mx-0.5 flex-shrink-0 rounded-full",
    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
      className: classnames("nm-activity-node-icon bg-muted text-muted-foreground relative flex h-7 w-7 items-center justify-center rounded-full p-1 [&>svg]:size-4", {
        "text-primary bg-primary/10": unread
      }),
      children: [icon, unread && /*#__PURE__*/jsxRuntime.jsx("span", {
        className: "bg-primary absolute -end-0.5 -top-0.5 h-2 w-2 rounded-full"
      })]
    })
  });
};

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("nm-engagements-node relative -mt-4 flex items-center gap-2 px-4 py-4", "before:bg-border before:absolute before:start-[31px] before:top-0 before:h-full before:w-0.5 before:content-['']", className),
    children: [/*#__PURE__*/jsxRuntime.jsx(ActivityIcon, {
      icon: icon,
      unread: unread
    }), userIcon || /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
      className: "!size-[18px] [&_[data-slot=avatar-fallback]]:text-[10px]",
      size: "sm",
      user: {
        name: user.name,
        imageUrl: user.profileImageUrl
      }
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "nm-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: "bg-muted/40 border-border flex items-center justify-between rounded-t-md border-b py-1 ps-4 pe-1",
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "flex min-w-0 flex-grow flex-wrap items-center gap-2",
      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
        size: "sm",
        user: avatar
      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
        as: "span",
        variant: "body3",
        weight: "semibold",
        children: user.name
      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
        as: "span",
        color: "muted",
        variant: "body3",
        children: "\u2022"
      }), info && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
          as: "span",
          className: "lowercase",
          color: "muted",
          variant: "body3",
          children: info
        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
          as: "span",
          color: "muted",
          variant: "body3",
          children: "\u2022"
        })]
      }), comment.createdAt && /*#__PURE__*/jsxRuntime.jsx(v2_DateFormat.FromNow, {
        date: comment.createdAt,
        typographyProps: {
          color: "muted",
          variant: "body3"
        }
      })]
    }), neetoCist.isPresent(actions) && /*#__PURE__*/jsxRuntime.jsx(v2_MoreDropdown, {
      dropdownButtonProps: {
        className: "self-start flex-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$1 = 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) {
    var group = groups.find(ramda.pathEq(emoji.unified, [0, "unified"]));
    if (group && findOwnIndex(group) >= 0) return;
    onAdd(_objectSpread(_objectSpread({}, emoji), {}, {
      emoji: emoji["native"]
    }));
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "mt-3 flex flex-wrap items-center gap-1",
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "bg-muted rounded-full",
      children: /*#__PURE__*/jsxRuntime.jsx(v2_EmojiPicker, {
        onSelect: onSelect
      })
    }), groups.map(function (reactionsGroup) {
      var ownIndex = findOwnIndex(reactionsGroup);
      var selected = ownIndex >= 0;
      var reaction = selected ? reactionsGroup[ownIndex] : reactionsGroup[0];
      var names = reactionsGroup.map(function (_ref2) {
        var reactor = _ref2.reactor;
        return typeof reactor === "string" ? reactor : reactor === null || reactor === void 0 ? void 0 : reactor.name;
      }).filter(Boolean).join(", ");
      return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
        content: t("neetoMolecules.engagements.namesReacted", {
          names: names
        }),
        position: "top",
        children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Button, {
          "aria-pressed": selected,
          size: "xs",
          variant: "ghost",
          className: classnames("h-7 rounded-full px-2 text-sm font-normal", {
            "!bg-muted !hover:bg-muted/80": selected,
            "!bg-muted/50": !selected
          }),
          onClick: function onClick() {
            return (selected ? onRemove : onAdd)(reaction);
          },
          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
            children: reaction.emoji
          }), /*#__PURE__*/jsxRuntime.jsx("span", {
            children: reactionsGroup.length
          })]
        })
      }, reaction.unified);
    })]
  });
};
var Reactions = /*#__PURE__*/React.memo(Reactions$1, ramda.eqProps("reactions"));

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

var createCommentElementId = function createCommentElementId(comment) {
  return "nm-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("nm-comments-node bg-card border-border relative mb-4 w-full rounded-md border", "before:bg-border before:absolute before:start-[30px] before:top-[calc(100%+1px)] before:h-4 before:w-0.5 before:content-['']", className),
    children: [/*#__PURE__*/jsxRuntime.jsx(CommentHeader, {
      actions: actions,
      comment: comment,
      info: info,
      user: user
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "nm-comments-node__inner p-4",
      children: [children, reactions !== false && /*#__PURE__*/jsxRuntime.jsx(Reactions, {
        reactions: reactions,
        onAdd: onAddReaction,
        onRemove: onRemoveReaction
      })]
    })]
  });
});
Comment.displayName = "Comment";
Comment.propTypes = {
  user: index.PropTypes.shape({
    name: index.PropTypes.string.isRequired
  }).isRequired,
  comment: index.PropTypes.shape({
    id: index.PropTypes.string.isRequired,
    createdAt: index.PropTypes.string
  }).isRequired,
  reactions: index.PropTypes.oneOfType([index.PropTypes.array, index.PropTypes.bool]),
  info: index.PropTypes.string,
  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
  })),
  className: index.PropTypes.string,
  onAddReaction: index.PropTypes.func,
  onRemoveReaction: index.PropTypes.func
};

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
