import type { JSX } from "@char/aftercare/jsx-runtime";
import { importMidi } from "./actions.ts";
import { Hints } from "./hints.tsx";
import { ChordPanel } from "./chord-panel.tsx";
import { installClipboard, installKeys } from "./keys.ts";
import { Palette } from "./palette.tsx";
import { Timeline } from "./timeline.tsx";
import { Toolbar } from "./toolbar.tsx";

export function App(): JSX.Element {
  installKeys();
  installClipboard();
  addEventListener("dragover", e => {
    if (e.dataTransfer?.types.includes("Files")) e.preventDefault();
  });
  addEventListener("drop", e => {
    if (!e.dataTransfer?.types.includes("Files")) return;
    // any dropped file would otherwise replace the page
    e.preventDefault();
    for (const file of e.dataTransfer.files) {
      if (/\.midi?$/i.test(file.name)) void importMidi(file);
    }
  });
  return (
    <div class="app">
      <Toolbar />
      <Timeline />
      <ChordPanel />
      <Palette />
      <Hints />
    </div>
  );
}