import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default, { memo, forwardRef } from 'react';
import { isPresent, findIndexBy, noop } from '@bigbinary/neeto-cist';
import { Avatar, Typography, Tooltip, Button } from '@bigbinary/neeto-atoms';
import classnames from 'classnames';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { P as PropTypes } from '../index-DAYCJu79.js';
import DateFormat from './DateFormat.js';
import MoreDropdown from './MoreDropdown.js';
import { globalProps } from '@bigbinary/neeto-commons-frontend/v2/initializers';
import { collectBy, prop, eqProps, pathEq } from 'ramda';
import { useTranslation } from 'react-i18next';
import EmojiPicker from './EmojiPicker.js';
import '../_commonjsHelpers-BFTU3MAI.js';
import '@bigbinary/neeto-commons-frontend/v2/react-utils/useTimer';
import '@bigbinary/neeto-commons-frontend/v2/utils/datetime';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@bigbinary/neeto-commons-frontend/v2/react-utils';
import '../createLucideIcon-mNMhCCpf.js';
import '../ellipsis-DpI9xqUK.js';
import '@babel/runtime/helpers/slicedToArray';
import '@bigbinary/neeto-atoms/primitives';
import 'emoji-mart';
import '@tanstack/react-query';
import 'axios';

var ActivityIcon = function ActivityIcon(_ref) {
  var icon = _ref.icon,
    unread = _ref.unread;
  return /*#__PURE__*/jsx("div", {
    className: "bg-card relative z-10 mx-0.5 flex-shrink-0 rounded-full",
    children: /*#__PURE__*/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__*/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__*/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__*/jsx(ActivityIcon, {
      icon: icon,
      unread: unread
    }), userIcon || /*#__PURE__*/jsx(Avatar, {
      className: "!size-[18px] [&_[data-slot=avatar-fallback]]:text-[10px]",
      size: "sm",
      user: {
        name: user.name,
        imageUrl: user.profileImageUrl
      }
    }), /*#__PURE__*/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__*/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__*/jsxs("div", {
      className: "flex min-w-0 flex-grow flex-wrap items-center gap-2",
      children: [/*#__PURE__*/jsx(Avatar, {
        size: "sm",
        user: avatar
      }), /*#__PURE__*/jsx(Typography, {
        as: "span",
        variant: "body3",
        weight: "semibold",
        children: user.name
      }), /*#__PURE__*/jsx(Typography, {
        as: "span",
        color: "muted",
        variant: "body3",
        children: "\u2022"
      }), info && /*#__PURE__*/jsxs(Fragment, {
        children: [/*#__PURE__*/jsx(Typography, {
          as: "span",
          className: "lowercase",
          color: "muted",
          variant: "body3",
          children: info
        }), /*#__PURE__*/jsx(Typography, {
          as: "span",
          color: "muted",
          variant: "body3",
          children: "\u2022"
        })]
      }), comment.createdAt && /*#__PURE__*/jsx(DateFormat.FromNow, {
        date: comment.createdAt,
        typographyProps: {
          color: "muted",
          variant: "body3"
        }
      })]
    }), isPresent(actions) && /*#__PURE__*/jsx(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 = findIndexBy({
  userId: globalProps.user.id
});
var groupReactions = collectBy(prop("unified"));
var Reactions = function Reactions(_ref) {
  var reactions = _ref.reactions,
    onAdd = _ref.onAdd,
    onRemove = _ref.onRemove;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var groups = groupReactions(reactions);
  var onSelect = function onSelect(emoji) {
    var group = groups.find(pathEq(emoji.unified, [0, "unified"]));
    if (group && findOwnIndex(group) >= 0) return;
    onAdd(_objectSpread(_objectSpread({}, emoji), {}, {
      emoji: emoji["native"]
    }));
  };
  return /*#__PURE__*/jsxs("div", {
    className: "mt-3 flex flex-wrap items-center gap-1",
    children: [/*#__PURE__*/jsx("div", {
      className: "bg-muted rounded-full",
      children: /*#__PURE__*/jsx(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__*/jsx(Tooltip, {
        content: t("neetoMolecules.engagements.namesReacted", {
          names: names
        }),
        position: "top",
        children: /*#__PURE__*/jsxs(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__*/jsx("span", {
            children: reaction.emoji
          }), /*#__PURE__*/jsx("span", {
            children: reactionsGroup.length
          })]
        })
      }, reaction.unified);
    })]
  });
};
var Reactions$1 = /*#__PURE__*/memo(Reactions, 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__*/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__*/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__*/jsx(CommentHeader, {
      actions: actions,
      comment: comment,
      info: info,
      user: user
    }), /*#__PURE__*/jsxs("div", {
      className: "nm-comments-node__inner p-4",
      children: [children, reactions !== false && /*#__PURE__*/jsx(Reactions$1, {
        reactions: reactions,
        onAdd: onAddReaction,
        onRemove: onRemoveReaction
      })]
    })]
  });
});
Comment.displayName = "Comment";
Comment.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired
  }).isRequired,
  comment: PropTypes.shape({
    id: PropTypes.string.isRequired,
    createdAt: PropTypes.string
  }).isRequired,
  reactions: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
  info: PropTypes.string,
  actions: PropTypes.arrayOf(PropTypes.shape({
    isVisible: PropTypes.bool,
    key: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired
  })),
  className: PropTypes.string,
  onAddReaction: PropTypes.func,
  onRemoveReaction: 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 : noop);
  return /*#__PURE__*/jsx(Fragment, {
    children: data.map(function (engagement, index) {
      var type = matchType(engagement);
      var renderer = rendererHashmap[type];
      if (!renderer) return null;
      return /*#__PURE__*/jsx(React__default.Fragment, {
        children: renderer(engagement, index)
      }, engagement.id);
    })
  });
};
Engagements.displayName = "Engagements";
Engagements.Comment = Comment;
Engagements.Activity = Activity;
Engagements.TYPES = ENGAGEMENT_TYPES;

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