const colors = {
  background: 'rgb(128, 128, 128)',
  line: 'rgb(80, 40, 255)',
};

export class Voronai {
  div = undefined;
  canvas = undefined;

  setDiv(id) {
    this.div = document.getElementById(id);
    // Create canvas that fills the window
    // If the window resizes, also resize the canvas
    const canvas = document.createElement('canvas')
    this.canvas = canvas;
    this.div.appendChild(canvas);
    this.fullscreen();
    window.addEventListener('resize', () => this.fullscreen());
    return this;
  }

  get ctx() {
    const ctx = this.canvas.getContext("2d");
    ctx.resetTransform();
    return ctx;
  }

  get width() {
    return this.canvas.width;
  }

  get height() {
    return this.canvas.height;
  }

  fullscreen() {
    this.canvas.width = document.documentElement.clientWidth;
    this.canvas.height = document.documentElement.clientHeight;
  }

  fillCanvas() {
    const ctx = this.ctx;
    ctx.fillStyle = colors.background;
    ctx.fillRect(0, 0, this.width, this.height);
  }

  drawSomething() {
    const ctx = this.ctx;
    ctx.strokeWidth = 1.0;
    ctx.strokeStyle = colors.line;
    ctx.beginPath();
    let x = this.width / 2;
    let y = this.height / 2;
    // ctx.moveTo(x, y);
    ctx.arc(x, y, 10, 0, 2 * Math.PI);
    console.log('drawing arc?');
    ctx.stroke();
  }

}