import { readSection } from "../import/hookpad.ts";
import type { TheoryTab } from "../import/theorytab.ts";

const SCALE_NAMES: Record<string, string> = { harmonicMinor: "harmonic minor" };
const pretty = (symbol: string) =>
  symbol
    .replace(/([A-G])b/g, "$1♭")
    .replace(/b(?=\d)/g, "♭")
    .replaceAll("#", "♯");

/** ask which sections of a TheoryTab to import: resolves to them, or null if cancelled */
export function chooseSections(tab: TheoryTab): Promise<TheoryTab["sections"] | null> {
  return new Promise(resolve => {
    const done = (choice: TheoryTab["sections"] | null) => {
      dialog.close();
      dialog.remove();
      resolve(choice);
    };

    const option = (
      label: string,
      detail: string,
      preview: string,
      sections: TheoryTab["sections"],
    ) => (
      <button type="button" class="tt-option" _onclick={() => done(sections)}>
        <b>{label}</b>
        <span class="tt-detail">{detail}</span>
        <span class="tt-preview">{preview}</span>
      </button>
    );

    const read = tab.sections.map(s => ({ ...s, read: readSection(s.song) }));
    const bars = (r: (typeof read)[number]["read"]) => Math.ceil(r.length / r.beatsPerBar);
    const filled = read.filter(s => s.read.chords.length || s.read.notes.length);

    const dialog = (
      <dialog class="dialog tt-dialog" _oncancel={() => done(null)}>
        <h2>{tab.title}</h2>
        <div class="tt-options">
          {option(
            "all sections",
            `${filled.reduce((n, s) => n + bars(s.read), 0)} bars`,
            "",
            tab.sections,
          )}
          {filled.map(s =>
            option(
              s.name,
              `${s.read.key.tonic} ${SCALE_NAMES[s.read.key.scale] ?? s.read.key.scale} · ${bars(s.read)} bars`,
              s.read.chords
                .slice(0, 8)
                .map(c => (c.symbol ? pretty(c.symbol) : "…"))
                .join("  "),
              [s],
            ),
          )}
        </div>
        <div class="dialog-actions">
          <button type="button" _onclick={() => done(null)}>
            cancel
          </button>
        </div>
      </dialog>
    ) as HTMLDialogElement;

    document.body.append(dialog);
    dialog.showModal();
  });
}