import { useTranslation } from "react-i18next";

import { type PlexCard, type Video } from "../lib/api";
import { pinPlex, pinVideo, useComfortPin, type PinTarget } from "./comfortPin";
import { ContextMenu } from "./ui/ContextMenu";
import { type ContextMenuController } from "./ui/useContextMenu";

// The menu SURFACE for the comfort-shelf pin (E24 S3). Split from `comfortPin.tsx` for the same
// reason `ContextMenu.tsx` is split from `useContextMenu.ts`: a file that exports components and
// nothing else keeps react-refresh working for every surface that imports it.

/**
 * The whole right-click menu for a surface whose only context action is the pin — the card grids and
 * rails. Render ONE per list, outside the rows (see `ui/ContextMenu`), and spread
 * `menu.triggerProps` on each row.
 *
 * `target` maps the row the user right-clicked to its pin; `title` names it in the confirmation
 * toast. Both come from the call site because only it knows what its rows are.
 */
export function ComfortPinMenu<T>({
  menu,
  target,
  title,
}: {
  menu: ContextMenuController<T>;
  target: (row: T) => PinTarget | null;
  title: (row: T) => string;
}) {
  const { t } = useTranslation();
  const pin = useComfortPin(menu.open);
  const row = menu.target;
  return (
    <ContextMenu
      menu={menu}
      ariaLabel={t("home.pin.menu")}
      items={row ? pin.item(target(row), title(row)) : []}
    />
  );
}

/** The Plex poster grids and rails — five of them, all pinning the same way. One component so the
 *  show-vs-item decision and the toast's name are written once rather than five times. */
export function PlexPinMenu({ menu }: { menu: ContextMenuController<PlexCard> }) {
  return <ComfortPinMenu menu={menu} target={pinPlex} title={(c) => c.title} />;
}

/** The YouTube video lists (the feed grid, the Home rails). */
export function VideoPinMenu({ menu }: { menu: ContextMenuController<Video> }) {
  return <ComfortPinMenu menu={menu} target={(v) => pinVideo(v.id)} title={(v) => v.title ?? ""} />;
}