import { useTranslation } from "react-i18next";
import { type PlexCard } from "../../lib/api";
import { type ActionMenuItem } from "../../components/ui/ActionMenu";
import { ContextMenu } from "../../components/ui/ContextMenu";
import { type ContextMenuController } from "../../components/ui/useContextMenu";
import { type PlexCardActions } from "../../features/plexCards/usePlexCardActions";

/** A Plex poster list's one menu: every trigger — right-click, long-press, Shift+F10 and each card's
 *  "…" — opens it with the title's whole action list (`usePlexCardActions`, held by the list because
 *  its cards' hover "add" opens the same dialog). Render ONE per list, outside the cards. */
export function PlexMenu({
  menu,
  actions,
  pin = true,
  extra,
}: {
  menu: ContextMenuController<PlexCard>;
  actions: PlexCardActions;
  /** False for a list of episodes: an episode is not a comfort-shelf kind. */
  pin?: boolean;
  /** The host list's own rows for a title, after the shared ones (a collection's "Remove"). */
  extra?: (c: PlexCard) => ActionMenuItem[];
}) {
  const { t } = useTranslation();
  const c = menu.target;
  return (
    <>
      <ContextMenu
        menu={menu}
        ariaLabel={t("plex.menu")}
        items={c ? [...actions.items(c, { pin, anchor: menu.anchor }), ...(extra?.(c) ?? [])] : []}
      />
      {actions.panel}
    </>
  );
}