import { chordsOf } from "../midi/chords.ts";
import type { MidiPart } from "../midi/smf.ts";

export type PartKind = "chords" | "notes";

/** ask whether each part of a midi file comes in as chords or as melody: null if cancelled */
export function choosePartKinds(
  fileName: string,
  parts: readonly MidiPart[],
): Promise<PartKind[] | null> {
  return new Promise(resolve => {
    const done = (choice: PartKind[] | null) => {
      dialog.close();
      dialog.remove();
      resolve(choice);
    };

    const rows = parts.map(part => {
      const chords = chordsOf(part.notes);
      const timeWith = (atLeast: number) =>
        chords.filter(c => c.notes.length >= atLeast).reduce((t, c) => t + c.dur, 0);
      const most = Math.max(...chords.map(c => c.notes.length));
      const select = (
        <select aria-label={`import ${part.name} as`}>
          <option value="chords">chords</option>
          <option value="notes">melody</option>
        </select>
      ) as HTMLSelectElement;
      select.value = timeWith(2) > timeWith(1) / 2 ? "chords" : "notes";
      return {
        select,
        row: (
          <div class="midi-part">
            <b>{part.name}</b>
            <span class="midi-detail">
              {`${part.notes.length} notes · ${most === 1 ? "one" : `up to ${most}`} at once`}
            </span>
            {select}
          </div>
        ),
      };
    });

    const confirm = (
      <button type="button" _onclick={() => done(rows.map(r => r.select.value as PartKind))}>
        import
      </button>
    ) as HTMLButtonElement;

    const dialog = (
      <dialog class="dialog midi-dialog" _oncancel={() => done(null)}>
        <h2>{fileName}</h2>
        <div class="midi-parts">{rows.map(r => r.row)}</div>
        <div class="dialog-actions">
          <button type="button" _onclick={() => done(null)}>
            cancel
          </button>
          {confirm}
        </div>
      </dialog>
    ) as HTMLDialogElement;

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