/**
 * James Brink,  4/23/2021
 * A dragable rectangle with an array of info.
 * The elements of the this.info array are determined by the this.colors array.
 * Adapted from
 * https://editor.p5js.org/enickles/sketches/H1n19TObz
 * Uses my... (e.g. myRect) drawing functions to allow for CanvasClass
 */
class Rectangle {
  /**
   * Constructor for the rectangle.
   * (x, y): the initial upper left hand corner of the rectangle.
   * (w, h): the initial width and height of the rectangle.
   * rectColor: the background color of the rectangle.
   * borderColor: the color of the rectangle's border.
   * can: the canvas.
   */
  constructor(x, y, w, h, rectColor, borderColor, can) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.rectColor = rectColor;
    this.borderColor = borderColor;
    this.can = can;
    this.dragging = false;
    this.info = [];
    this.colors = [];
    this.offsetX = 0;
    this.offsetY = 0;

  }  // constructor
  
  /**
   * Shows the rectangle at (px, py) allowing it to be
   * dragged.  When drawing, it displays the info array in
   * in the rectangle.
   */
  show(px, py) {
    if (this.dragging) {
      this.x = px + this.offsetX;
      this.y = py + this.offsetY;
      loop();
    }
    stroke(255);
    myFill(this.rectColor);
    myStroke("black");
    myRect(this.x, this.y, this.w, this.h);
    let y = 20;
    myNoStroke();
    for (let i = 0; i < this.info.length; i++) {
      if (this.info[i] != "`") {
        myFill(this.colors[i]);
        myText(this.info[i], this.x + this.w/2, this.y + y);
        y += 18;
      }
    }
  } // show

  /** When the mouse is pressed in the rectangle, it sets this.dragging
   *  to true.
   */
  pressed(px, py) {
    this.dragging = px > this.x && px < this.x + this.w
           && py > this.y && py < this.y + this.h;
    this.offsetX = this.x - px;
    this.offsetY = this.y - py;
    loop();
  }  // pressed

  /**
   *  When the mouse is released, it sets this.dragging
   *  to false.
   */
  notPressed(px, py) {
    this.dragging = false;
  }  // notPressed

  /**
   * Allows setting the info and colors array used in drawing the rectangle.
   * info: array of data items for the legends
   * colors: array of colors to be used with those data items
   * numItems: number of legend items - used for height of rectangle
   */
  addInfo(info, colors, numItems ) {
    this.info = info;
    this.colors = colors;
    this.setHeight(18 * numItems + 15);
  } // addInfo

  /**
   * Set the height of the rectangle to h
   */
  setHeight(h) {
    this.h = h;
  }  // setHeight

  setLocation(x, y) {
    this.x = x;
    this.y = y;
    this.show();
  }  // setLocation
  
  getLocation() {
    return [this.x, this.y];
  }  // getLocation
}  // class Rectangle