import { Game } from ".";
import { Miscellaneous, loadAssets } from "./config";
import { LevelNames } from "./levels";
import {
  Grid,
  FacingDirection,
  Input,
  Render,
  Collision,
  GridSpawner,
  Life,
  Music,
  Level,
} from "./systems";

export class TheAbstractionEngine {
  private game: Game;
  private ctx: CanvasRenderingContext2D;
  private animationFrameId: number | null;

  constructor(game: Game, ctx: CanvasRenderingContext2D) {
    this.game = game;
    this.ctx = ctx;
    this.animationFrameId = null;
  }

  public async init() {
    await loadAssets();

    const inputSystem = new Input();
    this.addWindowEventListenersToInputSystem(inputSystem);

    const facingDirectionSystem = new FacingDirection(inputSystem);

    [
      new Level(LevelNames.LevelSelection),
      inputSystem,
      facingDirectionSystem,
      new Grid(
        { width: Miscellaneous.GRID_COLUMNS, height: Miscellaneous.GRID_ROWS },
        {
          width: Miscellaneous.GRID_CELL_WIDTH,
          height: Miscellaneous.GRID_CELL_HEIGHT,
        }
      ),
      new GridSpawner(),
      new Collision(),
      new Life(),
      new Music(),
      new Render(this.ctx),
    ].forEach((system) => this.game.addSystem(system));
  }

  public play() {
    this.game.start();

    const loop = (timestamp: number) => {
      this.game.doGameLoop(timestamp);
      this.animationFrameId = requestAnimationFrame(loop); // tail call recursion! /s
    };
    this.animationFrameId = requestAnimationFrame(loop);
  }

  public stop() {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
      this.animationFrameId = null;
    }
  }

  private addWindowEventListenersToInputSystem(input: Input) {
    this.ctx.canvas.addEventListener("keydown", (e) => {
      if (!e.repeat) {
        input.keyPressed(e.key.toLowerCase());
      }
    });

    this.ctx.canvas.addEventListener("keyup", (e) =>
      input.keyReleased(e.key.toLowerCase())
    );

    this.ctx.canvas.addEventListener("blur", () => input.clearKeys());

    this.ctx.canvas.addEventListener("mousemove", (e) => {
      const canvas = this.ctx.canvas;
      const rect = canvas.getBoundingClientRect();

      const scaleX = canvas.width / rect.width;
      const scaleY = canvas.height / rect.height;

      const x = (e.clientX - rect.left) * scaleX;
      const y = (e.clientY - rect.top) * scaleY;

      input.setMousePosition({ x, y });
    });
  }
}
