import type { JSX } from "@char/aftercare/jsx-runtime";
import { playing } from "../audio/transport.ts";
import { type Project, TONICS, UNTITLED } from "../project/model.ts";
import {
  commit,
  createProject,
  deleteProject,
  history,
  openProject,
  project,
  projectIndex,
  redo,
  undo,
} from "../project/store.ts";
import { MODES } from "../theory/key.ts";
import { rekey } from "../project/harmony.ts";
import {
  exportMidi,
  exportProject,
  importingTheoryTab,
  importMidi,
  importProject,
  importTheoryTab,
  togglePlay,
} from "./actions.ts";
import { chooseFile, watch } from "./dom.tsx";

const pretty = (s: string) => s.replace("#", "♯").replace("b", "♭");
const MODE_OPTIONS = Object.entries(MODES).map(([id, { label }]): [string, string] => [
  id,
  label,
]);

const options = (entries: [value: string, label: string][]) =>
  entries.map(([value, label]) => <option value={value}>{label}</option>);

/** a control bound to a project field: shows the current value, commits changes */
function bind<E extends HTMLInputElement | HTMLSelectElement>(
  el: E,
  read: (p: Project) => string,
  write: (d: Project, value: string) => void,
  { history = true } = {},
): E {
  watch(el, [project], () => {
    if (document.activeElement !== el) el.value = read(project.get());
  });
  el.addEventListener("change", () => {
    commit(d => write(d, el.value), { history });
    if (el instanceof HTMLSelectElement) el.blur();
  });
  return el;
}

/** the things you do to a project as a whole, in a menu under a button */
function projectMenu() {
  const item = (label: string, run: () => void) => (
    <button
      type="button"
      role="menuitem"
      _onclick={() => {
        menu.hidePopover();
        run();
      }}
    >
      {label}
    </button>
  );
  const menu = (
    <div class="menu" popover="auto" role="menu">
      {item("new project", createProject)}
      {item("rename…", () => {
        const name = prompt("project name", project.get().name);
        if (name !== null)
          commit(d => void (d.name = name.trim() || UNTITLED), { history: false });
      })}
      {item("delete…", () => {
        if (confirm(`delete "${project.get().name}"?`)) deleteProject(project.get().id);
      })}
      <hr />
      {item("open project file…", () =>
        chooseFile(".chordpad,.json", file => void importProject(file)),
      )}
      {item("save project file", exportProject)}
      <hr />
      {item("import midi…", () =>
        chooseFile(".mid,.midi,audio/midi", file => void importMidi(file)),
      )}
      {item("export midi", exportMidi)}
      {item("import theorytab…", () => {
        const url = prompt("TheoryTab link (hooktheory.com/theorytab/view/…)");
        if (url) void importTheoryTab(url);
      })}
    </div>
  ) as HTMLDivElement;

  const toggle = (
    <button
      type="button"
      class="tb-menu"
      aria-haspopup="menu"
      disabled={importingTheoryTab}
      _also={el => el.setAttribute("popovertarget", "project-menu")}
    >
      {importingTheoryTab.derive(busy => (busy ? "importing…" : "project ▾"))}
    </button>
  ) as HTMLButtonElement;
  menu.id = "project-menu";
  // opens under its button
  menu.addEventListener("beforetoggle", e => {
    if ((e as ToggleEvent).newState !== "open") return;
    const at = toggle.getBoundingClientRect();
    Object.assign(menu.style, { left: `${at.left}px`, top: `${at.bottom + 4}px` });
  });
  // a press outside only closes it. the browser would close it too, but not when the press
  // redraws what's under it (as clicking the timeline does), and the press would still edit
  addEventListener(
    "pointerdown",
    e => {
      const target = e.target as Node;
      if (!menu.matches(":popover-open") || menu.contains(target) || toggle.contains(target))
        return;
      e.stopPropagation();
      e.preventDefault();
      menu.hidePopover();
    },
    true,
  );
  return [toggle, menu];
}

export function Toolbar(): JSX.Element {
  const projects = (
    <select
      class="tb-projects"
      title="projects"
      _onchange={() => openProject(projects.value)}
    />
  ) as HTMLSelectElement;
  watch(projects, [projectIndex, project.derive(p => `${p.id} ${p.name}`)], () => {
    // a blank project isn't saved, so isn't in the list: show it anyway while it's open
    const current = project.get();
    const saved = projectIndex.get();
    const listed = saved.some(e => e.id === current.id) ? saved : [current, ...saved];
    projects.replaceChildren(...options(listed.map(e => [e.id, e.name])));
    projects.value = current.id;
  });

  const loop = (
    <input
      type="checkbox"
      _onchange={() => commit(d => void (d.loop = loop.checked), { history: false })}
    />
  ) as HTMLInputElement;
  watch(loop, [project], () => (loop.checked = project.get().loop));

  return (
    <header class="toolbar">
      <div class="tb-section tb-left">
        <div class="tb-group">
          {projects}
          {projectMenu()}
        </div>

        <div class="tb-group">
          <label>key</label>
          {bind(
            (<select>{options(TONICS.map(t => [t, pretty(t)]))}</select>) as HTMLSelectElement,
            p => p.key.tonic,
            (d, v) => rekey(d, { ...d.key, tonic: v }),
          )}
          {bind(
            (<select>{options(MODE_OPTIONS)}</select>) as HTMLSelectElement,
            p => p.key.mode,
            (d, v) => rekey(d, { ...d.key, mode: v as Project["key"]["mode"] }),
          )}
        </div>
      </div>

      <div class="tb-section tb-middle">
        <div class="tb-group">
          <button type="button" class="tb-play" _onclick={togglePlay}>
            {playing.derive(p => (p ? "■ stop" : "▶ play"))}
          </button>
          <label>{loop} loop</label>
          <label>
            {bind(
              (<input type="number" class="tb-bpm" min="30" max="300" />) as HTMLInputElement,
              p => String(p.bpm),
              (d, v) => (d.bpm = Math.min(300, Math.max(30, Number(v) || d.bpm))),
            )}
            bpm
          </label>
        </div>
      </div>

      <div class="tb-section tb-right">
        <div class="tb-group">
          <label>
            chords
            {bind(
              (
                <select>
                  {options([
                    ["0.25", "1/16"],
                    ["0.5", "1/8"],
                    ["1", "1/4"],
                    ["2", "1/2"],
                    ["4", "1 bar"],
                    ["8", "2 bars"],
                  ])}
                </select>
              ) as HTMLSelectElement,
              p => String(p.chordLength),
              (d, v) => (d.chordLength = Number(v)),
              { history: false },
            )}
          </label>
          <label>
            grid
            {bind(
              (
                <select>
                  {options([
                    ["1", "1/4"],
                    ["0.5", "1/8"],
                    ["0.25", "1/16"],
                    [String(1 / 3), "1/8T"],
                  ])}
                </select>
              ) as HTMLSelectElement,
              p => String(p.grid),
              (d, v) => (d.grid = Number(v)),
              { history: false },
            )}
          </label>
        </div>

        <div class="tb-group">
          <button
            type="button"
            title="undo (ctrl+z)"
            disabled={history.derive(h => !h.undo)}
            _onclick={undo}
          >
            undo
          </button>
          <button
            type="button"
            title="redo (ctrl+shift+z)"
            disabled={history.derive(h => !h.redo)}
            _onclick={redo}
          >
            redo
          </button>
        </div>
      </div>
    </header>
  );
}