//  HowTo write a function to list an object's fields and methods.
// James Brink      2/10/2020

// ******************************************************
class SelectItem {
  constructor (itsDisplay, itsValue, itsComment) {
    this.display = itsDisplay;  // text shown Select
    this.value = itsValue;  // Useful value supplied when item is clicked
    this.comment = itsComment;  // Description shown in canvas when
                                // item is clicked
  }
}  // class SelectItem

//  ***********************************************************
//  Some global variables used in draw and evaluated elsewhere
let canvasOutput1;
let canvasOutput2

//  ***********************************************************

/**
 * Functions for the select that determines the type of output
 * desired from the listMembers function.
 * The posible items are stored in outputSelectItems.
 * For each item it specifies the value displayed in the select,
 * the value to be "returned", and a desciption that can be displayed
 * in the canvas.
 * The result of the click event is stored in the global outputValue.
 */
let outputValue = "code";  // global, initial value
let outputSelect;
let outputSelectItems;  
 
  // Create a dropdown menu object for the type of out desired.
function createOutputSelect() {
  // initialize array for the items
  declareOutputSelectItems();
  // create the header
  let outputSelectP = createP("Select the desired type of output.");  // heading
  outputSelectP.parent("controls");
  outputSelectP.style("margin-bottom: 1px");
  // create the Select
  outputSelect = createSelect();  // the select
  outputSelect.parent("controls");
  for (let i = 0; i < outputSelectItems.length; i++) {
    outputSelect.option(outputSelectItems[i].display);
  }
  outputSelect.changed(outputSelectEvent);
}  // end createOutputSelect  

 
function outputSelectEvent() {
  let outputType = 0;   // set default
  let output = outputSelect.value();
  for (let i = 0; i < outputSelectItems.length; i++) {
    if (output == outputSelectItems[i].display) {
      outputType = i;
      break;
    }
  }
  // establish info about selected item
  outputValue = outputSelectItems[outputType].value;
  canvasOutput1 = outputSelectItems[outputType].display;
  canvasOutput2 = outputSelectItems[outputType].comment;  // display the comment 
}  // outputSelectEvent

function declareOutputSelectItems() {
  outputSelectItems = [
      new SelectItem('String with "\\n" for new lines', 'code',
          'Put the output in a string using'
          + '\n"\\n" as a new line marker.'
          + '\n'
          + 'This is suitable for the canvas, console, and alert.'
          + '\nOutput will be grabled in HTML.'),
      new SelectItem('String with HTML br tag for new lines;', 'HTML',
          'Put the output in a string using'
          + ' <br> as a new line marker.'
          + '\n'
          + 'This is ONLY suitable for output to the HTML page.'),
      new SelectItem('Array', 'array',
          'Put the output in an array that can be manipulated'
          + '\n like any other array.  The first column is the'
          + '\n "index" and the second is its value.  The third'
          + '\n is the type of the value.'
          + '\n\nThis program automatically displays the array'
          + '\n in an HTML "<table>" ignoring the setting'
          + '\n of the "desired location of output select".')
   ];
}  // end declareOutputSelectItems

/**
 * Functions for the select that determines the location of the output
 * desired from the listMembers function.
 * The posible items are stored in locationSelectItems.
 * For each item it specifies the value displayed in the select,
 * the value to be "returned", and a desciption that can be displayed
 * in the canvas.
 * The result of the click event is stored in the global locationValue.
 */
let locationValue = "canvas";  // global, initial value
let locationSelect;
let locationSelectItems;  
function createLocationSelect() { 
  // Create a dropdown LocationSelect() {
  // initialize array for the items
  declareLocationSelectItems();
  // create the header
  let locationSelectP = createP("Select the desired location of output.");  // heading
  locationSelectP.parent("controls");
  locationSelectP.style("margin-bottom: 1px");

  // create the Select
  locationSelect = createSelect();  // the select
  locationSelect.parent("controls");
  for (let i = 0; i < locationSelectItems.length; i++) {
    locationSelect.option(locationSelectItems[i].display);
  }
  locationSelect.changed(locationSelectEvent);
}  // end createLocationSelect  

function locationSelectEvent() {
  let locationType = 0;   // set default
  let output = locationSelect.value();
  for (let i = 0; i < locationSelectItems.length; i++) {
    if (output == locationSelectItems[i].display) {
      locationType = i;
      break;
    }
  }
  // establish info about selected item
  locationValue = locationSelectItems[locationType].value;
  canvasOutput1 = locationSelectItems[locationType].display;
  canvasOutput2 = locationSelectItems[locationType].comment;  // display the comment 
}  // locationSelectEvent

function declareLocationSelectItems() {
  locationSelectItems = [
      new SelectItem('Canvas', 'canvas',
          'Display the output in the canvas.'
        + '\n\n"String with "\\n" for new lines" must be chosen.'),  
      new SelectItem('Alert', 'alert',
          'Display the output in an alert popup dialog.'
          + '\n\n"String with "\\n" for new lines" must be chosen.'),
      new SelectItem('Console log', 'console',
          'Display the output in the console log.  The console'
          + '\nmust be displayed for this to be visible. If needed:'
          + '\n   Firefox: Ctrl-Shift-K, pick Console tab'
          + '\n   Opera: Ctrl-Shift-I, pick Console tab,'
          + '\n   Edge, Chrome: F12'
          + "\n   Safari: cmd+opt+c (untested, I don't have an Apple)"
          + '\n\n"String with "\\n" for new lines must be chosen.'),
      new SelectItem('HTML page', 'HTML',
          + 'Display the output in the HTML page.  The output'
          + '\n\n"String with HTML br tab for new lines"'
          + '\nmust be chosen.')
   ];
}  // end declareLocationSelectItems

/**
 * Functions related to the variable select varSelect
 *
 * Note:  The items displayed in the Select are stored in  
 * varSelectItems.  Each item includes:
 *    display:  item displayed in the Select dropdown
 *    value:  the variable to be displayed.
 *    comment:  Some kind of discription of the item for display in the canvas
 * The event function evaluates the global variables:
 *    varNum:  array subscipt of selected item
 *    varSelectDisplay:  the selected items display (string with variable name)
 *    varValue:  the value of the selected item (e.g. name of variable) */
// globals
// let varSelectText;
// let varSelectVar;
let varSelect;       // the Select component
let varSelectItems;
let varNum  = 0;    // default item
let varSelectDisplay = "";
let varValue;
canvasOutput1 = varSelectDisplay;
canvasOutput2 = "";

// Create the slider for the variable selection 

function createVarSelect() {
  // Create a dropdown menu object for the item to be inspected,
  // its function, and other related code
  
  // declare values for the select items
  declareVarSelectItems();
  // create the heading for the Select
  let varSelectP = createP("Select the variable");  // heading
  varSelectP.parent("controls");
  varSelectP.style("margin-bottom: 1px");
 // create the variable select item
  varSelect = createSelect(); // label
  varSelect.parent("controls"); 
  // Set options and event handler
  for (let i = 0; i < varSelectItems.length; i++) {
    varSelect.option(varSelectItems[i].display);
  }
  varSelect.changed(myVarSelectEvent);
}  //  createVarSelect

// The function called when an variable is selected.
// varSelect.value is the text string selected by the user. 
function myVarSelectEvent() {
  varNum = 0;  // default if the selected item can't be found
  let item = varSelect.value();
  for (let i = 0; varSelectItems.length; i++) {
    if (item === varSelectItems[i].display) {
      varNum = i;
      break;
    }
  }
  // establish info about selected item
  varSelectDisplay = varSelectItems[varNum].display;
  varValue = varSelectItems[varNum].value;
  canvasOutput1 = varSelectDisplay;
  canvasOutput2 = varSelectItems[varNum].comment;  // display the comment 

}  // myVarSelectEvent

function declareVarSelectItems() {
  // the following array contains variable names that were specified
  // in setup()
  varSelectItems = [
      new SelectItem("person - an object", person,
         'person = {' 
         + '\n   name: "Simon",'
         + '\n   age: "20",'
         + '\n   clothing: {'
         + '\n      style: "simple",'
         + '\n      hipster: false'
         + '\n}'),
      new SelectItem("n - a number variable", n, 
          'let n = 25.5;'),
      new SelectItem("st - string", st, 
          'let st = "a string";'),
      new SelectItem("u - variable without value", u,
          'let u;'),
      new SelectItem("ages - an array", ages,
          'let ages = [25, 15, 23, 42, "Infant"];'),
      new SelectItem("f - a function", f, f),
      new SelectItem("box - value is class", box,
          'class Box {'
          + '\n  constructor(itsX, itsY, itsWidth, itsHeight, itsFillColor) {'
          + '\n    this.x = itsX;'
          + '\n    this.y = itsY;'
          + '\n    this.width = itsWidth;'
          + '\n    this.height = itsHeight;'
          + '\n    this.fillColor = itsFillColor;'
          + '\n    this.draw = this.display;'
          + '\n  }'
          + '\n  display() {'
          + '\n      fill(this.fillColor);'
          + '\n      rect(this.x, this.y, this.width, this.height);'
          + '\n  }'
          + '\n} // end Box'),
      new SelectItem("box1 - value is class instance", box1,
          'class Box {'
          + '\n  constructor(itsX, itsY, itsWidth, itsHeight, itsFillColor) {'
          + '\n    this.x = itsX;'
          + '\n    this.y = itsY;'
          + '\n    this.width = itsWidth;'
          + '\n    this.height = itsHeight;'
          + '\n    this.fillColor = itsFillColor;'
          + '\n    this.draw = this.display;'
          + '\n  }'
          + '\n  display() {'
          + '\n      fill(this.fillColor);'
          + '\n      rect(this.x, this.y, this.width, this.height);'
          + '\n  }'
          + '\n} // end Box'
          + '\nlet box1 = new Box(350, 100, 70, 100, color(255,255, 0));'
          + '\n(Notice the function for draw is listed in the output!)'),
       new SelectItem("sym - a symbol", sym, 
          'let sym = Symbol("foo");'
          + '\n'
          + '\nA symbol value may be used as an identifier for object '
          + '\nproperties; this is the data type\'s primary purpose, '
          + '\nalthough other use-cases exist.'
          + '\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript'
          + '\n       /Reference/Global_Objects/Symbol'),
      new SelectItem('env = p5.Envelope', env, 
          'let env = new p5.Envelope();'
          + '\nenv.setADSR(1.1,   1.7, .55, 2.2);'
          + '\n env.setRange(.99, .11);'
          + '\n\nNote:  Listing includes codes for functions defined'
          + '\nby the object'),
      new SelectItem('p5LeftDiv - div', p5LeftDiv,
          'The division were HTML output is displayed.'),
      new SelectItem("outputSelect", outputSelect,
          'The select (drop down) control for the desired output.')
     ];
 // SelectDisplay = "";
  // establish info about selected item
  varSelectDisplay = varSelectItems[0].display;
  varValue = varSelectItems[0].value;
  canvasOutput1 = varSelectDisplay;
  canvasOutput2 = varSelectItems[0].comment;  // display the comment 
}  // declareVarSelectItems

/**
 * Functions for the select that determines the type of typeOf
 * desired from the listMembers function.
 * The posible items are stored in typeOfSelectItems.
 * For each item it specifies the value displayed in the select,
 * the value to be "returned", and a desciption that can be displayed
 * in the canvas.
 * The result of the click event is stored in the global typeOfValue.
 */
let typeOfValue = "all";  // global, initial value
let typeOfSelect;
let typeOfSelectItems;  
 
  // Create a dropdown menu object for the type of desired.
function createTypeOfSelect() {
  declareTypeOfSelectItems();
  // create the header
  let typeOfSelectP = createP("Select the type(s) of members to be listed.");  // heading
  typeOfSelectP.parent("controls");
  typeOfSelectP.style("margin-bottom: 1px");
  // create the Select
  typeOfSelect = createSelect();  // the select
  typeOfSelect.parent("controls");
  for (let i = 0; i < typeOfSelectItems.length; i++) {
    typeOfSelect.option(typeOfSelectItems[i].display);
  }
  typeOfSelect.changed(typeOfSelectEvent);
}  // end createTypeOfSelect  

 
function typeOfSelectEvent() {
  let typeOfType = 0;   // set default
  let typeOf = typeOfSelect.value();
  for (let i = 0; i < typeOfSelectItems.length; i++) {
    if (typeOf == typeOfSelectItems[i].display) {
      typeOfType = i;
      break;
    }
  }
  // establish info about selected item
  typeOfValue = typeOfSelectItems[typeOfType].value;
  canvasOutput1 = typeOfSelectItems[typeOfType].display;
  canvasOutput2 = typeOfSelectItems[typeOfType].comment;  // display the comment 
}  // typeOfSelectEvent

function declareTypeOfSelectItems() {
  typeOfSelectItems = [
      new SelectItem('all types', 'all',
          'Include all types in output'),
      new SelectItem('undefined', 'undefined',
          'The item has not been given a value (or is not declared).'),
      new SelectItem('boolean', 'boolean',
          'The item is either "true" or "false".'),
      new SelectItem('number', 'number',
          'The value is a integer or floating number (including NaN).'),
      new SelectItem('function', 'function',
          'The item is a function or class definintion.'),
      new SelectItem('object', 'object',
          'The item is an object, array, or null.'),
      new SelectItem('string', 'string',
          'The item is a string'),
      new SelectItem('symbol', 'symbol',
          'The item is a special type called Symbol.'),
      new SelectItem('bigint', 'bigint',
          'The object has a really new type called bigint.')
     ];
  }  // declareTypeOfSelectItems
 


/**
 * Functions for the "Calculate and display" button.
 * The button calculates a list of members of the selected
 * variable as specified by the varNum variable,
 * accoding to specifications ??? into the
 * location specified by loc.
 */
function createDisplayEventButton() {
 // Create a button to request a update of the display.
  displayP = createP("&nbsp;");
  displayP.parent("controls");
  displayP.style("margin-bottom: 1px");
  displayButton = createButton("&nbsp; Calculate and Display &nbsp;");
  displayButton.parent("controls");
  displayButton.mousePressed(displayEvent);
}  // createDisplayEventButton
 
function displayEvent() {
  listResults = listMembers(varValue, outputValue, typeOfValue);
  // if the result is an array, send a <table> to the HTML page
  if (outputValue == "array") {  // if the result is an array,
    let tableStyle = "border-collapse: collapse; border: 1px solid black;"
           + "background-color: #EEFFEE";
    let data = '<td style = "border: 1px solid black; padding: 3px">';
    let header = '<th style = "border: 1px solid black; padding: 3px">';
    let st = varSelectDisplay;
    st += "<br><br>Type of object: " +  (typeof varValue); 
    st += "<br>Number of " + typeOfValue + " values: "
            + listResults.length + "<br><br>";
    if (listResults.length > 0) {
      st += '<table style = "' + tableStyle + '">';
      st += '<tr>' + header + 'Name</th>' + header + 'Value</th>'
           + header + 'Type of Value</th></tr>';
       for (let i = 0; i < listResults.length; i++) {
        st += "<tr>" + data +  listResults[i][0] + "</td>" 
             + data + listResults[i][1] + "</td>"
             + data + listResults[i][2] + "</td></tr>";
       }
      st += "</table>";
    }
    p5LeftDiv.html(st);
  } else {  // process normally
    if (locationValue == "alert") {
      alert(listResults);
    } else if (locationValue == "HTML") {
      p5LeftDiv.html(varSelectDisplay + "<br><br>" + listResults);
    } else if (locationValue == "console") {
      console.log(listResults);
    } else {  // default
      canvasOutput2 = listResults;
    }
  }
}  // end displayEvent 

/**
 *The following are to be used as examples
 */
// An array
let ages = [25, 15, 23, 42, "Infant"];
// An object
person = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}; 
// A simple function

function f(x) {
  let y = sin(x);
  return y;
}
// A simple class and two instances
class Box {
  constructor(itsX, itsY, itsWidth, itsHeight, itsFillColor) {
    this.x = itsX;
    this.y = itsY;
    this.width = itsWidth;
    this.height = itsHeight;
    this.fillColor = itsFillColor;
    this.draw = this.display
  }  
  display() {
    fill(this.fillColor);
    rect(this.x, this.y, this.width, this.height);
  }
} // end Box

let box1;

let box2;

// Numerical, string, and other variables
let u;
let n = 25.5;
let st = "a string";
let sym = Symbol("foo");
let listResults;
let canvasOutput = "";  // output to printed in canvas
let p5LeftDiv;


/** 
 * setup the sketch
 */
function setup() {
  // create the canvas
  let canvas = createCanvas(450, 290);
  canvas.parent("p5");
  background(200, 200, 255);
  // put a div into the existing div
  p5LeftDiv = createDiv();
  p5LeftDiv.parent("p5-left");
  box1 = new Box(350, 100, 70, 100, color(255,255, 0));
  env = new p5.Envelope();
  env.setADSR(1.1,   1.7, .55, 2.2);
  env.setRange(.99, .11);
  box2 = new Box(390, 70, 60, 80, color(255, 255, 255));
  createOutputSelect();
  createLocationSelect();
  declareVarSelectItems();  // may include items created above
  createVarSelect();
  createTypeOfSelect()
  createDisplayEventButton();
  
} // setup

// show the results
function draw() {
  background(200, 200, 255);
  box1.display();
  box2.display();
 // textFont('Helvetica');
  fill(255, 0, 0).textSize(16);
  text(canvasOutput1, 20, 15);
  fill(0, 0, 0).textSize(12);
  text(canvasOutput2, 35, 35);
   
}  // draw