/*
 * @name Load Saved Table
 * @arialabel Four white circles with labels 
 * @description Create a Bubble class, instantiate multiple bubbles using data from
 * a csv file, and display results on the screen.
 * Because web browsers differ in where they save files, we do not make use of
 * saveTable(), unlike the Processing example.<br><br>
 * Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
 */

// Bubble class
class Bubble {
  constructor(x, y, diameter, name) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.radius = diameter / 2;
    this.name = name;

    this.over = false;
  }

  // Check if mouse is over the bubble
  rollover(px, py) {
    let d = dist(px, py, this.x, this.y);
    this.over = d < this.radius;
  }

  // Display the Bubble
  display() {
    stroke(0);
    strokeWeight(0.8);
    noFill();
    ellipse(this.x, this.y, this.diameter, this.diameter);
    if (this.over) {
      fill(0);
      textAlign(CENTER);
      text(this.name, this.x, this.y + this.radius + 20);
    }
  }
}

let table; // Global object to hold results from the loadTable call
let bubbles = []; // Global array to hold all bubble objects

// Put any asynchronous data loading in preload to complete before "setup" is run
function preload() {
  // table = loadTable("assets/bubbles.csv", "header");
  table = loadTable("../../../../p5js-website-legacy-examples/assets/bubbles.csv", "header");
}

// Convert saved Bubble data into Bubble Objects
function loadData() {
  const bubbleData = table.getRows();
  // The size of the array of Bubble objects is determined by the total number of rows in the CSV
  const length = table.getRowCount();

  for (let i = 0; i < length; i++) {
    // Get position, diameter, name,
    const x = bubbleData[i].getNum("x");
    const y = bubbleData[i].getNum("y");
    const diameter = bubbleData[i].getNum("diameter");
    const name = bubbleData[i].getString("name");

    // Put object in array
    bubbles.push(new Bubble(x, y, diameter, name));
  }
}

// Create a new Bubble each time the mouse is clicked.
function mousePressed() {
  // Create a new row
  let row = table.addRow();

  let name = "New Bubble";
  let diameter = random(40, 80);

  // Set the values of that row
  row.setNum("x", mouseX);
  row.setNum("y", mouseY);
  row.setNum("diameter", diameter);
  row.setString("name", name);

  bubbles.push(new Bubble(mouseX, mouseY, diameter, name));

  // If the table has more than 10 rows
  if (table.getRowCount() > 10) {
    // Delete the oldest row
    table.removeRow(0);
    bubbles.shift();
  }
}

function setup() {
  // createCanvas(640, 360);
  createCanvas(windowWidth, windowHeight);
  loadData();
}

function draw() {
  background(255);

  // Display all bubbles
  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].display();
    bubbles[i].rollover(mouseX, mouseY);
  }

  // Label directions at bottom
  textAlign(LEFT);
  fill(0);
  text("Click to add bubbles.", 10, height - 10);
}