class JobList extends List {
  constructor(idOrElement, options, live=false) {
    super(idOrElement, options);
    this.createJobElements(jobs);
    if (live) {
      subscribers.jobs.push(this);
    }
  }


  createJobElement(job) {
    var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
        jobTitleElement;

    jobDescriptionElement = document.createElement("p");
    jobDescriptionElement.classList.add("description");
    jobDescriptionElement.innerText = job.description;
    jobElement = document.createElement("a");
    jobElement.classList.add("avatar", "collection-item");
    jobElement.dataset.id = job.id;
    jobElement.href = `/jobs/${job.id}`;
    jobServiceElement = document.createElement("i");
    jobServiceElement.classList.add("circle", "material-icons", "service-icon", JobList.SERVICE_COLORS[job.service]);
    jobServiceElement.innerText = JobList.SERVICE_ICONS[job.service];
    jobStatusElement = document.createElement("span");
    jobStatusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status]);
    jobStatusElement.dataset.badgeCaption = "";
    jobStatusElement.innerText = job.status;
    jobTitleElement = document.createElement("span");
    jobTitleElement.classList.add("title");
    jobTitleElement.innerText = job.title;

    jobElement.appendChild(jobServiceElement);
    jobElement.appendChild(jobStatusElement);
    jobElement.appendChild(jobTitleElement);
    jobElement.appendChild(jobDescriptionElement);

    return jobElement;
  }


  createJobElements(jobs) {
    var job;

    for (job of jobs) {
      this.list.appendChild(this.createJobElement(job));
    }

    this.reIndex();
    this.update();
    List.updatePagination(this);
  }


  jobsUpdateHandler(delta) {
    var jobElement, jobStatusElement, key, listItem;

    for (key in delta) {
      if (key === "_t") {continue;}
      if (key.startsWith("_")) {
        this.remove("id", delta[key][0].id);
      } else if (Array.isArray(delta[key])) {
        jobElement = this.createJobElement(delta[key][0]);
        listItem = this.add({"description": delta[key][0].description,
                             "title": delta[key][0].title,
                             "id": delta[key][0].id})[0];
        if (listItem.elm) {
          listItem.elm.replaceWith(jobElement);
        }
        listItem.elm = jobElement;
      } else {
        listItem = this.get("id", jobs[parseInt(key)].id)[0];
        if (delta[key]["status"]) {
          jobStatusElement = listItem.elm.querySelector(".status");
          jobStatusElement.classList.remove(JobList.STATUS_COLORS[delta[key]["status"][0]]);
          jobStatusElement.classList.add(JobList.STATUS_COLORS[delta[key]["status"][1]]);
          jobStatusElement.innerHTML = delta[key]["status"][1];
        }
        if (delta[key]["description"]) {
          listItem.values({"description": delta[key]["description"][1]});
        }
        if (delta[key]["title"]) {
          listItem.values({"title": delta[key]["title"][1]});
        }
      }
    }
  }
}

JobList.SERVICE_COLORS = {"nlp": "blue",
                          "ocr": "green",
                          "default": "red"};
JobList.SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
                         "ocr": "find_in_page",
                         "default": "help"};
JobList.STATUS_COLORS = {"pending": "amber",
                         "running": "indigo",
                         "complete": "teal",
                         "default": "red"};