import { canvas2d, h } from "../lib/html";
import { Cancel } from "../lib/source";
import { tick } from "../lib/tick";

export function TickDebug() {
  const output = h("pre", {});

  const tickSource = tick(30);
  let cancel: Cancel;

  const begin = () => {
    // reset / init
    cancel?.();
    output.innerHTML = "";
    // subscribe to source, stash cancellation func
    cancel = tickSource((tick) => {
      switch (tick[0]) {
        case "physics":
          output.append(`${new Date().toISOString()}: Physics\n`);
          break;
        case "render":
          output.append(
            `${new Date().toISOString()}: Render (dt=${tick[1]})\n`
          );
          break;
      }
    });
  };

  const end = () => cancel?.();

  const start = h("button", { onclick: begin }, "Begin");
  const stop = h("button", { onclick: end }, "Cease");

  return [h("h1", {}, "Tick Event Demo"), start, stop, output, h("hr")];
}

export function OrbitDemo() {
  const [canvas, cx] = canvas2d({
    width: 512,
    height: 512,
  });
  cx.scale(1 / 2, 1 / 2);
  cx.translate(512, 512);

  const masses: {
    x: number;
    y: number;
    vx: number;
    vy: number;
    r: number;
    m: number;
    c: string;
  }[] = [
    { x: 0, y: 0, vx: 0, vy: 0, r: 10, m: 10000, c: "yellow" },
    { x: -200, y: 200, vx: 100, vy: 100, r: 4, m: 4, c: "red" },
    { x: -450, y: 0, vx: 0, vy: 100, r: 5, m: 5, c: "blue" },
  ];

  const tickSource = tick(16);
  let cancel: Cancel;

  const begin = () => {
    // reset / init
    cancel?.();
    // subscribe to source, stash cancellation func
    cancel = tickSource((tick) => {
      switch (tick[0]) {
        case "physics":
          break;
        case "render":
          const [, dt] = tick;
          cx.fillStyle = "black";
          cx.fillRect(-512, -512, 1024, 1024);
          masses.forEach(({ x, y, vx, vy, r, c }) => {
            cx.fillStyle = c;
            cx.beginPath();
            cx.arc(x + vx * dt, y + vy * dt, r, 0, Math.PI * 2);
            cx.fill();
          });
          break;
      }
    });
  };

  const end = () => cancel?.();

  const start = h("button", { onclick: begin }, "Begin");
  const stop = h("button", { onclick: end }, "Cease");

  return [h("h1", {}, "Orbit Demo"), h("p", {}, start, stop), canvas, h("hr")];
}