// Classes available in each quarter.
const QUARTERS = ["Fall 2020", "Winter 2021"];
const CLASSES = {
    "Fall 2020": ["CSE 341", "CSE 344", "CSE 421", "CSE 431"],
    "Winter 2021": ["CSE 341", "CSE 344", "CSE 421", "CSE 444"]
  };


var quarter = undefined;  // quarter to display, undefined if none picked yet
var classes = [];         // list of classes picked with no duplicates


// Updates the page content to display the correct UI for the state above. If
// no quarter has been picked, then we let the user pick a quarter. Otherwise,
// we let the user pick classes within the chosen quarter.
function ShowUI() {
  let html = []

  if (quarter === undefined) {
    for (let i = 0; i < QUARTERS.length; i++) {
      html.push('<div>');
      html.push(
          '<button type="button" class="btn btn-dark"' +
                 ' onclick="PickQuarter(' + i + ')">' +
          QUARTERS[i] +
          '</button>');
      html.push('</div>');
    }

  } else {
    html.push('<div><button type="button" class="btn btn-link"' +
              ' onclick="Back()">Back</button></div>');
    html.push('<p>Choose your classes:</p>');
    html.push('<div class="choices">');

    for (let i = 0; i < CLASSES[quarter].length; i++) {
      const name = CLASSES[quarter][i];
      const checked = classes.indexOf(name) >= 0;
      html.push('<div class="form-check">');
      html.push('<input class="form-check-input" type="checkbox"' +
                ' value="' + i + '"' + (checked ? ' checked' : '') +
                ' onchange="ClassChange(event)">');
      html.push('<label class="form-check-label">');
      html.push(name);
      html.push('</label>');
      html.push('</div>');
    }

    html.push('</div>');
    html.push('<p>Total of ' + TotalCredits(classes) + ' credits.</p>');
  }

  // Join the strings above together into one long string and insert that
  // between the start and end tags of the "content" DIV.
  let elem = document.getElementById('content');
  elem.innerHTML = html.join('\n');
}

// Called when the user clicks on a button for a particular quarter.
function PickQuarter(index) {
  quarter = QUARTERS[index];  // show this specific quarter

  ShowUI();
}

// Called when the user clicks on the "Back" button when seeing the list of
// classes in a particular quarter.
function Back() {
  quarter = undefined;  // back to list of quarters
  classes = [];

  ShowUI();
}

// Called when the user checks or unchecks a particular class. Updates the
// state to reflect this change.
function ClassChange(evt) {
  const cls = CLASSES[quarter][parseInt(evt.target.value)];
  const index = classes.indexOf(cls);
  if (evt.target.checked) {
    if (index < 0)
      classes.push(cls);  // add at the end
  } else {
    if (index >= 0)
      classes.splice(index, 1);  // remove that 1 element
  }

  ShowUI();
}


// Records the credits for each known course.
const CREDITS = {
    "CSE 341": 4,
    "CSE 344": 4,
    "CSE 421": 3,
    "CSE 431": 3,
    "CSE 444": 4,
  };


// Returns the total credits for the given list of classes. (The list should
// have no duplicates.)
function TotalCredits(classes) {
  let total = 0;
  for (let i = 0; i < classes.length; i++) {
    if (classes[i] in CREDITS) {
      total += CREDITS[classes[i]];
    } else {
      throw new Error("no such class: " + classes[i]);
    }
  }
  return total;
}