/**
 * Renders the like button of a comment in a dump's thread.
 *
 * @module
 */

import { useRef, useState } from "react";
import { t } from "@lingui/core/macro";
import { API_URL } from "../../config/api.ts";
import { UserListPopover } from "./UserListPopover.tsx";

/**
 * Passed to {@link LikeButton} by `CommentNode`, with the state and the
 * functions of `WSContext`.
 */
export interface LikeButtonProps {
  commentId: string;
  /** The socket's live count if it has one, else the comment's `likeCount`. */
  count: number;
  liked: boolean;
  /** Set for a visitor, whom the tooltip asks to log in. */
  disabled?: boolean;
  /** Called with `count`, which `WSContext` needs until it has a live count. */
  onLike: (commentId: string, shownCount?: number) => void;
  /** Called with `count`, as `onLike` is. */
  onUnlike: (commentId: string, shownCount?: number) => void;
}

/**
 * Renders a comment's like button and its count. Clicking the count, when it
 * isn't zero, opens the list of likers (`GET /api/comments/:id/likers`)
 * instead.
 */
export function LikeButton(
  { commentId, count, liked, disabled, onLike, onUnlike }: LikeButtonProps,
): React.JSX.Element {
  const [popoverOpen, setPopoverOpen] = useState(false);
  const countRef = useRef<HTMLSpanElement>(null);

  return (
    <>
      <button
        type="button"
        className={`comment-action-btn${
          liked ? " comment-action-btn--liked" : ""
        }`}
        // Not `disabled`, as for VoteButton: its count opens the likers.
        onClick={() => {
          if (disabled) return;
          if (liked) onUnlike(commentId, count);
          else onLike(commentId, count);
        }}
        aria-disabled={disabled}
        aria-label={liked ? t`Remove like` : t`Like`}
        title={disabled ? t`Log in to like` : undefined}
      >
        ♥ {count > 0
          ? (
            <span
              ref={countRef}
              className="like-count-clickable"
              onClick={(e) => {
                // Or the button would toggle the like too.
                e.stopPropagation();
                setPopoverOpen((o) => !o);
              }}
            >
              {count}
            </span>
          )
          : count}
      </button>
      {popoverOpen && (
        <UserListPopover
          anchorRef={countRef}
          onClose={() => setPopoverOpen(false)}
          fetchUrl={`${API_URL}/api/comments/${commentId}/likers`}
        />
      )}
    </>
  );
}