export class Canvases {
  bgCanvas;
  fgCanvas;
  bgCtx;
  fgCtx;

  setMain(main) {
    this.main = main;
  }

  initialize() {
    this.initializeBackground();
    this.initializeForeground();
    this.fullscreen();
    window.addEventListener('resize', () => this.fullscreen());
  }

  initializeBackground() {
    this.bgCanvas = document.createElement("canvas");
    this.main.div.appendChild(this.bgCanvas);
    this.bgCanvas.classList.add("fullscreen");
    this.bgCanvas.classList.add("background");
    this.bgCtx = this.bgCanvas.getContext("2d");
    this.clear(this.bgCanvas, this.bgCtx);
  }

  initializeForeground() {
    this.fgCanvas = document.createElement("canvas");
    this.main.div.appendChild(this.fgCanvas);
    this.fgCanvas.classList.add("fullscreen");
    this.fgCanvas.classList.add("foreground");
    this.fgCtx = this.fgCanvas.getContext("2d");
    this.clear(this.fgCanvas, this.fgCtx);
  }

  clear(canvas, ctx) {
    if (!canvas && !ctx) {
      this.clear(this.bgCanvas, this.bgCtx);
      this.clear(this.fgCanvas, this.fgCtx);
      return;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (ctx === this.bgCtx) {
      this.bgCtx.fillStyle = '#ccc';
      this.bgCtx.fillRect(0, 0, this.bgCanvas.width, this.bgCanvas.height);
    }
  }

  fullscreen() {
    const dim = {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    };
    Object.assign(this.bgCanvas, dim);
    Object.assign(this.fgCanvas, dim);
  }
}