import { Elements } from "./elements.js";
import { Pointer } from "./pointer.js";
import { Canvases } from "./canvases.js";

const pointer = new Pointer();

export class Main {
  div = undefined; // Constructor finds this by id
  // Child objects we create
  canvases = new Canvases();
  elements = new Elements();
  pointer = new Pointer();
  // Initialize variables for main loop
  run = true;
  currentTime;

  constructor(mainDivId) {
    this.div = document.getElementById(mainDivId);
    this.canvases.setMain(this);
    this.elements.setMain(this);
    this.pointer.setMain(this);
  }

  start() {
    this.canvases.initialize();
    this.pointer.initialize();
    requestAnimationFrame(() => this.loop());
  }

  loop(elapsedTime) {
    if (this.run) {
      this.currentTime = document.timeline.currentTime;
      this.canvases.clear();
      this.pointer.updateHistory({ decay: true });
      this.pointer.drawHistory();
      this.elements.renderAll();
    }
    requestAnimationFrame(() => this.loop());
  }

  addElement(params) {
    return this.elements.add(params);
  }
}