const TABLE_ROW = "tr";
const TABLE_DATA = "td";

function loadProjectList() {
  api.getProjects().then((projects) => {
    var table = u(u("#project-list").first());
    Object.values(projects).forEach((project) => {
      var row = createNode(TABLE_ROW);
      var data = undefined;

      data = createNode(TABLE_DATA);
      append(row, data);
      u(data).text(project["name"]);

      data = createNode(TABLE_DATA);
      append(row, data);
      u(data).text(new Date(project["start_date"]).toDateString());

      var duration = parseFloat(project["duration"]) / 60 / 60;
      var unit = "hours";
      data = createNode(TABLE_DATA);
      append(row, data);
      u(data).text(duration + " " + unit);

      data = createNode(TABLE_DATA);
      append(row, data);
      u(data).text(project["record_count"]);

      data = createNode(TABLE_DATA);
      append(row, data);
      u(data).text(
        duration / parseInt(project["record_count"]) + " " + unit + "/record"
      );

      row = u(row);
      row.data("project-id", project["project_id"]);
      row.on("click", projectClicked);

      table.append(row);
    });
  });
}

// Created new DOM object
// element: Type of DOM object (div, p, ...)
function createNode(element) {
  return document.createElement(element);
}

// Appends child to parent
// parent: DOM to append child to
// el: DOM child to append to parent
function append(parent, el) {
  return parent.appendChild(el);
}

function projectClicked(event) {
  console.log(event);
}