import { useMemo } from "react";
import { keyboard } from "@/lib/input/keyboard";
import { Kbd } from "@/ui/misc";
import { t, tNode } from "@/lib/i18n";

export function ShortcutsSettings() {
  const list = useMemo(() => keyboard.list(), []);
  const groups = useMemo(() => {
    const g = new Map<string, typeof list>();
    for (const b of list) {
      const arr = g.get(b.group) ?? [];
      arr.push(b);
      g.set(b.group, arr);
    }
    return [...g.entries()];
  }, [list]);
  return (
    <div>
      <h1>{t("Keyboard shortcuts")}</h1>
      <p className="lead">{tNode("Gmail-style shortcuts are always on. Press {key} anywhere to see this list.", { key: <kbd className="kbd">?</kbd> })}</p>
      <div className="shortcut-grid">
        {groups.map(([group, items]) => (
          <div key={group}>
            {/* Group names and descriptions are registered in English at the
                call sites -- see views/Shortcuts.tsx -- because the binding
                table is data, not markup, and the English is the catalog
                key. Translating at render keeps the registration simple and
                means a binding added anywhere is translatable without the
                registrar knowing about i18n. */}
            <h3>{t(group)}</h3>
            {items.map((b) => (
              <div key={b.keys} className="shortcut-row"><span>{t(b.description)}</span><Kbd keys={b.keys} /></div>
            ))}
          </div>
        ))}
        {!groups.length && <p className="hint">{t("Open the Mail view to see all shortcuts.")}</p>}
      </div>
    </div>
  );
}