import { forwardRef, type AnchorHTMLAttributes } from "react";
import { useTranslation } from "react-i18next";
import { isPlainLeftClick } from "../../lib/nav";
import { channelUrl } from "../../lib/urlState";

// A channel name that is a REAL link. The player showed it as a `<button>`, so the browser's own
// gestures did nothing on it: middle-click and Ctrl/Cmd-click opened no tab, on a thing that looks
// exactly like a link (the YouTube icon right next to it IS an anchor and does open one). The video
// card's channel name had the same `<button>`, so it renders through here too.
//
// The href is the same URL `openChannel` pushes (`channelUrl`: the channel over the current page,
// without the page's own keys) — so a new tab lands where the in-app navigation would have. A plain left click is still handled in-app, because
// the SPA path does more than navigate (the player has to close first and reclaim its own
// Back-to-close history entry; see lib/history.closeOverlaysThenNavigate).
type Props = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "title"> & {
  channelId: string;
  title: string | null | undefined;
  /** The in-app navigation, run only for a plain left click. */
  onOpenInApp: () => void;
  /** The native tooltip (`title` is taken by the channel's name). */
  tooltip?: string;
  /** Keep EVERY click on the link — the browser's own gestures too — from reaching a clickable
   *  ancestor (the video card's row). */
  stopPropagation?: boolean;
};

const ChannelNameLink = forwardRef<HTMLAnchorElement, Props>(function ChannelNameLink(
  { channelId, title, onOpenInApp, tooltip, stopPropagation, ...rest },
  ref,
) {
  const { t } = useTranslation();
  return (
    <a
      {...rest}
      ref={ref}
      href={channelUrl(channelId)}
      title={tooltip}
      onClick={(e) => {
        if (stopPropagation) e.stopPropagation();
        if (!isPlainLeftClick(e)) return; // let the browser open its tab/window
        e.preventDefault();
        onOpenInApp();
      }}
    >
      {/* A channel first seen through a live search can have no title yet. An empty anchor would
          still be in the tab order, announced by nothing but its href. */}
      {title || t("player.channel")}
    </a>
  );
});

export default ChannelNameLink;