import type { JSX } from "@char/aftercare/jsx-runtime";
import { project } from "../project/store.ts";
import { watch } from "./dom.tsx";
import { activeTrackId, chordEdit } from "./state.ts";

type Hint = [keys: string[], action: string];

const HINTS: Record<string, Hint[]> = {
  typing: [
    [["space"], "next chord"],
    [["enter"], "done"],
    [["esc"], "cancel"],
  ],
  chords: [
    [["A–G", "I–VII"], "type a chord"],
    [["←→"], "move"],
    [["↑↓"], "inversion"],
    [["p"], "unpin"],
    [["space"], "play"],
  ],
  notes: [
    [["click"], "add"],
    [["ctrl click"], "move cursor"],
    [["shift drag"], "select"],
    [["alt click"], "delete"],
    [["↑↓"], "transpose"],
    [["space"], "play"],
  ],
  none: [[["space"], "play"]],
};

const render = ([keys, action]: Hint) => (
  <span class="hint">
    {keys.map(k => (
      <kbd>{k}</kbd>
    ))}{" "}
    {action}
  </span>
);

/** the few keys that matter for whatever's being edited */
export function Hints(): JSX.Element {
  const bar = (<footer class="hints" />) as HTMLElement;
  let shown = "";
  watch(bar, [activeTrackId, chordEdit, project], () => {
    const track = project.get().tracks.find(t => t.id === activeTrackId.get());
    const which = chordEdit.get() ? "typing" : (track?.kind ?? "none");
    if (which === shown) return;
    shown = which;
    bar.replaceChildren(...HINTS[which].map(render));
  });
  return bar;
}