Comment thread

"use client";

import { createContext, useContext, type ComponentProps, type ReactNode } from "react";
import { Avatar } from "./avatar";
import { Button } from "./button";
import { Icon, type IconName } from "./icon";
import "./comment-thread.css";

function cx(base: string, className: string | undefined) {
  return [base, className].filter(Boolean).join(" ");
}

/* True inside a comment's replies, so a reply cannot nest replies of its own. */
const InReplies = createContext(false);

export type CommentThreadProps = ComponentProps<"div"> & {
  /** Names the thread for assistive tech, e.g. "Comments on Invoice 2041". */
  label: string;
  /** A composer for a new top-level comment, placed after the thread. Bring your own editor. */
  composer?: ReactNode;
};

export function CommentThread({ label, composer, className, children, ...rest }: CommentThreadProps) {
  return (
    <div {...rest} className={cx("eq-comment-thread", className)}>
      <ol className="eq-comment-thread-list" aria-label={label}>
        {children}
      </ol>
      {composer != null && <div className="eq-comment-thread-composer">{composer}</div>}
    </div>
  );
}

export type CommentReaction = {
  /** Passed back to onReact. */
  id: string;
  /** What it means, read with the count, e.g. "Thumbs up". */
  label: string;
  /** An icon name, such as "thumbs-up" or "heart". */
  icon?: IconName;
  /** Or an emoji, when there is no icon for it. */
  emoji?: string;
  count: number;
  /** The viewer has reacted with this one. */
  pressed?: boolean;
};

export type CommentItemProps = Omit<ComponentProps<"li">, "children"> & {
  /** Who wrote it. Also gives the avatar its initials. */
  author: string;
  /** Avatar image URL. */
  src?: string;
  /** When, already formatted, e.g. "2 hours ago". */
  time: string;
  /** ISO date for a time element. */
  dateTime?: string;
  /** Shows an Edited marker after the time. */
  edited?: boolean;
  /** Replaces the comment with a placeholder. Its replies stay. */
  deleted?: boolean;
  /** Reaction toggles shown under the body. */
  reactions?: CommentReaction[];
  /** Called with a reaction's id when it is toggled. */
  onReact?: (id: string) => void;
  /** Small buttons such as Reply or Edit, after the reactions. */
  actions?: ReactNode;
  /** CommentItem elements. Only top-level comments render replies: nesting stops at one level. */
  replies?: ReactNode;
  /** A reply composer under the replies. Bring your own editor. */
  composer?: ReactNode;
  /** The comment text. */
  children?: ReactNode;
};

export function CommentItem({
  author,
  src,
  time,
  dateTime,
  edited = false,
  deleted = false,
  reactions,
  onReact,
  actions,
  replies,
  composer,
  className,
  children,
  ...rest
}: CommentItemProps) {
  const isReply = useContext(InReplies);
  const name = deleted ? (isReply ? "Deleted reply" : "Deleted comment") : `${isReply ? "Reply" : "Comment"} by ${author}`;
  const showReplies = !isReply && replies != null;

  return (
    <li {...rest} className={cx("eq-comment-thread-comment", className)} data-deleted={deleted || undefined}>
      <article className="eq-comment-thread-article" aria-label={name}>
        {deleted ? (
          <span className="eq-comment-thread-ghost" aria-hidden="true" />
        ) : (
          <Avatar className="eq-comment-thread-avatar" name={author} src={src} alt="" size="s" />
        )}
        <div className="eq-comment-thread-main">
          {deleted ? (
            <p className="eq-comment-thread-deleted">This comment was deleted</p>
          ) : (
            <>
              <p className="eq-comment-thread-meta">
                <span className="eq-comment-thread-author">{author}</span>
                {dateTime ? (
                  <time className="eq-comment-thread-time" dateTime={dateTime}>
                    {time}
                  </time>
                ) : (
                  <span className="eq-comment-thread-time">{time}</span>
                )}
                {edited && <span className="eq-comment-thread-edited">Edited</span>}
              </p>
              {children != null && <div className="eq-comment-thread-body">{children}</div>}
              {((reactions != null && reactions.length > 0) || actions != null) && (
                <div className="eq-comment-thread-footer">
                  {reactions != null && reactions.length > 0 && (
                    <div className="eq-comment-thread-reactions" role="group" aria-label="Reactions">
                      {reactions.map((reaction) => (
                        <Button
                          key={reaction.id}
                          className="eq-comment-thread-reaction"
                          size="xs"
                          variant="outline"
                          pressed={reaction.pressed ?? false}
                          aria-label={`${reaction.label}, ${reaction.count}`}
                          lead={
                            reaction.icon ? (
                              <Icon name={reaction.icon} size={14} />
                            ) : (
                              <span className="eq-comment-thread-emoji" aria-hidden="true">
                                {reaction.emoji}
                              </span>
                            )
                          }
                          onClick={() => onReact?.(reaction.id)}
                        >
                          {reaction.count}
                        </Button>
                      ))}
                    </div>
                  )}
                  {actions != null && <div className="eq-comment-thread-actions">{actions}</div>}
                </div>
              )}
            </>
          )}
        </div>
      </article>
      {showReplies && (
        <InReplies.Provider value={true}>
          <ol className="eq-comment-thread-replies" aria-label={deleted ? "Replies" : `Replies to ${author}`}>
            {replies}
          </ol>
        </InReplies.Provider>
      )}
      {composer != null && <div className="eq-comment-thread-composer">{composer}</div>}
    </li>
  );
}