import {
  getContext,
  getContextItem,
  setContextItem,
  setDefaultContext,
} from "./lib/context.ts";
import { InputManager } from "./lib/input.ts";

import { Doodler, Vector, ZoomableDoodler } from "@bearmetal/doodler";
import { ResourceManager } from "./lib/resources.ts";
import { addButton } from "./ui/button.ts";
import { TrackSystem } from "./track/system.ts";
import { StraightTrack } from "./track/shapes.ts";
import { StateMachine } from "./state/machine.ts";
import { bootstrapGameStateMachine } from "./state/states/index.ts";

const inputManager = new InputManager();
const resources = new ResourceManager();
const doodler = new ZoomableDoodler({
  fillScreen: true,
  bg: "#302040",
});
(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
  .imageSmoothingEnabled = false;
// doodler.minScale = 0.1;
// (doodler as any).scale = doodler.maxScale;

const colors = [
  "red",
  "orange",
  "yellow",
  "green",
  "blue",
  "indigo",
  "purple",
  "violet",
];

setDefaultContext({
  inputManager,
  doodler,
  resources,
  debug: true,
  showEnds: true,
  colors,
});

const state = bootstrapGameStateMachine();
setContextItem("state", state);

doodler.init();

doodler.createLayer((_, __, dTime) => {
  state.update(dTime);
});

document.addEventListener("keydown", (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === "s") {
    e.preventDefault();
    const track = getContextItem<TrackSystem>("track");
    localStorage.setItem("track", track.serialize());
    console.log("Saved track to local storage");
  }
});

setInterval(() => {
  const doodler = getContextItem<Doodler>("doodler");
  const frameRate = doodler.fps;
  let fpsEl = document.getElementById("fps");
  if (!fpsEl) {
    fpsEl = document.createElement("div");
    fpsEl.id = "fps";
    document.body.appendChild(fpsEl);
  }
  fpsEl.textContent = frameRate.toFixed(1) + " fps";
}, 1000);