import { useTranslation } from "react-i18next";
import { ArrowDown, ArrowDownToLine, ArrowUp, ArrowUpToLine } from "lucide-react";
import { MOVES, moveTarget, type MoveTo } from "../../lib/moveInList";
import type { ActionMenuItem } from "./ActionMenu";

// The non-drag reorder (WCAG 2.5.7, docs/DESIGN.md "Reordering"), in its two forms: a row menu's four
// rows (here: a playlist item, a Plex playlist row) and buttons (`OrderButtons`: four beside the
// selected item of the saved views' editor, or an Up / Down pair on every group of a side panel in
// edit mode). Same labels, same glyphs, same rule: a move that would go nowhere — the first item up,
// the last down — is shown off, not hidden, so the moves always sit in the same place.

export const ORDER_ICON: Record<MoveTo, typeof ArrowUp> = {
  top: ArrowUpToLine,
  up: ArrowUp,
  down: ArrowDown,
  bottom: ArrowDownToLine,
};

/** The four move rows of a menu, for the item at `from` in a list of `count`; `onMove` gets the index
 *  it lands on. `off` turns all four off (the list is not in its stored order; a write in flight) and
 *  its reason, if any, goes under the FIRST row only — one explanation for the group, not the same
 *  line four times. */
export function useOrderItems() {
  const { t } = useTranslation();
  return (
    from: number,
    count: number,
    onMove: (to: number) => void,
    off?: { reason?: string },
  ): ActionMenuItem[] =>
    MOVES.map((to, i) => {
      const Icon = ORDER_ICON[to];
      const at = moveTarget(from, count, to);
      return {
        id: `order-${to}`,
        label: t(`common.order.${to}`),
        icon: <Icon className="w-4 h-4" />,
        separatorBefore: i === 0,
        disabled: !!off || at === null,
        note: i === 0 ? off?.reason : undefined,
        onSelect: () => {
          if (at !== null) onMove(at);
        },
      };
    });
}