import type { JSX } from "@char/aftercare/jsx-runtime";
import { projectKey } from "../project/model.ts";
import { project } from "../project/store.ts";
import { palette, prettyRoman, type Relation } from "../theory/analysis.ts";
import { formatNote } from "../theory/pitch.ts";
import { chordName } from "../theory/chord.ts";
import { MODES } from "../theory/key.ts";
import { previewChord, writeChordFromPalette } from "./actions.ts";
import { Circle } from "./circle.tsx";
import { disclosure, help, watch } from "./dom.tsx";
import { mixtureOpen, paletteSevenths } from "./state.ts";

const LABELS: Partial<Record<Relation, string>> = {
  home: "key",
  sharp: "sharp vertex",
  flat: "flat vertex",
  inverse: "inverse vertex",
};

/** the diatonic chords of the key, of the other keys on its axis, and of its parallel modes */
export function Palette(): JSX.Element {
  const keyId = project.derive(p => `${p.key.tonic} ${p.key.mode}`);
  const rows = <div class="palette-rows" />;

  watch(rows, [keyId, paletteSevenths], () => {
    const key = projectKey(project.get());
    rows.replaceChildren(
      ...palette(key, paletteSevenths.get()).map(
        ({ key: rowKey, relation, entries, vertex }) => (
          <div
            class={`palette-row ${relation === "parallel" ? `from-${rowKey.mode}` : `on-${relation}`}`}
          >
            <div class="palette-mode">
              {LABELS[vertex ?? relation] ?? MODES[rowKey.mode].label}
              {relation !== "parallel" || vertex ? (
                <small>
                  {formatNote(rowKey.tonic)} {MODES[rowKey.mode].label}
                </small>
              ) : undefined}
            </div>
            {entries.map(({ chord, symbol, diatonic }) => (
              <button
                type="button"
                class={`chip${relation !== "home" && diatonic ? " same" : ""}`}
                // the second click of a double-click would only preview on top of the write
                _onclick={e => e.detail < 2 && previewChord(symbol)}
                _ondblclick={() => writeChordFromPalette(symbol)}
              >
                <b>{prettyRoman(symbol)}</b>
                <span>{chordName(chord)}</span>
              </button>
            ))}
          </div>
        ),
      ),
    );
  });

  return (
    <section class="palette" dataset={{ open: mixtureOpen.derive(String) }}>
      <header>
        {disclosure(mixtureOpen, "modal mixture")}
        {help(
          "chords to borrow: from the key, from the three keys a minor third and a tritone " +
            "away, and from the other modes on the same tonic. faded ones are already in the " +
            "key.\n\nthe circle of fifths turns to put the current chord at the top, with " +
            "what's a fifth either way of it beside it, and the relative minors inside; " +
            "it writes after the current chord, if there's room.\n\n" +
            "click a chord to hear it; double-click to write it at the cursor",
        )}
        <label>
          <input type="checkbox" checked={paletteSevenths} /> sevenths
        </label>
      </header>
      <div class="palette-body">
        {rows}
        <Circle />
      </div>
    </section>
  );
}