const STEPS = 8;

class Picker extends Canvas {

  setColor0;

  setColor1;

  constructor(size, canvasElementId, setColor0, setColor1) {
    super(canvasElementId, (STEPS + 1) * size, 7 * size, (event) => this.mouseEvent(event));
    this.setColor0 = setColor0;
    this.setColor1 = setColor1;
    this.size = size;
    this.draw();
  }

  mouseEvent(event) {
    const color = this.getPixelColor(event);
    if (Boolean(event.buttons & 1)) {
      this.setColor0(color);
    } else if (Boolean(event.buttons & 2)) {
      this.setColor1(color);
    }
  }

  draw() {
    this.ctx.fillStyle = "#fff";
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    let y = 0;
    this.drawMatrix(true, false, false, y++);
    this.drawMatrix(true, true, false, y++);
    this.drawMatrix(false, true, false, y++);
    this.drawMatrix(false, true, true, y++);
    this.drawMatrix(false, false, true, y++);
    this.drawMatrix(true, false, true, y++);
    this.drawMatrix(true, true, true, y++);
  }

  drawMatrix(dr, dg, db, y) {
    for (let x = 0; x <= STEPS; x++) {
      const r = x * (dr ? 256 / STEPS : 0) - 1;
      const g = x * (dg ? 256 / STEPS : 0) - 1;
      const b = x * (db ? 256 / STEPS : 0) - 1;
      this.fillRect(x, y, `rgb(${r},${g},${b})`);
    }
  }

}