import { jsx, jsxs } from "react/jsx-runtime";
import { ToolbarButton } from "@wordpress/components";
import { __, _n, sprintf } from "@wordpress/i18n";
import { useMemo } from "@wordpress/element";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import clsx from "clsx";
import { unlock } from "../../lock-unlock";
import { getAvatarBorderColor } from "./utils";
const { CommentIconToolbarSlotFill } = unlock(blockEditorPrivateApis);
const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
  const threadParticipants = useMemo(() => {
    if (!thread) {
      return [];
    }
    const participantsMap = /* @__PURE__ */ new Map();
    const allComments = [thread, ...thread.reply];
    allComments.sort((a, b) => new Date(a.date) - new Date(b.date));
    allComments.forEach((comment) => {
      if (comment.author_name && comment.author_avatar_urls) {
        const authorKey = `${comment.author}-${comment.author_name}`;
        if (!participantsMap.has(authorKey)) {
          participantsMap.set(authorKey, {
            name: comment.author_name,
            avatar: comment.author_avatar_urls?.["48"] || comment.author_avatar_urls?.["96"],
            id: comment.author,
            isOriginalCommenter: comment.id === thread.id,
            date: comment.date
          });
        }
      }
    });
    return Array.from(participantsMap.values());
  }, [thread]);
  const hasUnresolved = thread?.status !== "approved";
  const threadHasMoreParticipants = hasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;
  if (!threadParticipants.length) {
    return null;
  }
  const maxAvatars = 3;
  const visibleParticipants = threadParticipants.slice(0, maxAvatars);
  const overflowCount = Math.max(0, threadParticipants.length - maxAvatars);
  const overflowText = threadHasMoreParticipants && overflowCount > 0 ? __("100+") : sprintf(
    // translators: %s: Number of participants.
    __("+%s"),
    overflowCount
  );
  const overflowTitle = threadHasMoreParticipants && overflowCount > 0 ? __("100+ participants") : sprintf(
    // translators: %s: Number of participants.
    _n(
      "+%s more participant",
      "+%s more participants",
      overflowCount
    ),
    overflowCount
  );
  return /* @__PURE__ */ jsx(CommentIconToolbarSlotFill.Fill, { children: /* @__PURE__ */ jsx(
    ToolbarButton,
    {
      className: clsx("comment-avatar-indicator", {
        "has-unresolved": hasUnresolved
      }),
      label: __("View notes"),
      onClick,
      showTooltip: true,
      children: /* @__PURE__ */ jsxs("div", { className: "comment-avatar-stack", children: [
        visibleParticipants.map((participant, index) => /* @__PURE__ */ jsx(
          "img",
          {
            src: participant.avatar,
            alt: participant.name,
            className: "comment-avatar",
            style: {
              zIndex: maxAvatars - index,
              borderColor: getAvatarBorderColor(
                participant.id
              )
            }
          },
          participant.name + index
        )),
        overflowCount > 0 && /* @__PURE__ */ jsx(
          "div",
          {
            className: "comment-avatar-overflow",
            style: { zIndex: 0 },
            title: overflowTitle,
            children: overflowText
          }
        )
      ] })
    }
  ) });
};
var comment_indicator_toolbar_default = CommentAvatarIndicator;
export {
  comment_indicator_toolbar_default as default
};
//# sourceMappingURL=comment-indicator-toolbar.js.map
