var JOBLANGUAGES = {
  "nlp": {
    "de": "Deutsch",
    "en": "Englisch",
    "fr": "Französisch",
    "pt": "Portugisisch",
    "es": "Spanisch"
  },
  "ocr": {
    "deu": "Deutsch",
    "deu_frak": "Deutsch (Fraktur)",
    "eng": "Englisch",
    "fra": "Französisch",
    "por": "Portugisisch",
    "spa": "Spanisch"
  }
};
var JOBSERVICEICONS = {
  "nlp": "format_textdirection_l_to_r",
  "ocr": "find_in_page"
};
var JOBSTATUSCOLORS = {
  "failed": "pink",
  "finished": "teal",
  "queued": "amber",
  "running": "indigo"
};
var JOBSTATUSNAMES = {
  "failed": 'Fehlgeschlagen',
  "finished": 'Abgeschlossen',
  "queued": 'Wartend',
  "running": 'Laufend'
}
var JOBSTATUSTEXTS = {
  'failed': 'Es ist ein Fehler bei der Bearbeitung des Auftrages aufgetreten. \
             Für weitere Informationen wenden Sie sich mit dem \
             Auftragskennzeichen an den Seitenbetreiber.',
  'finished': 'Der Auftrag ist abgeschlossen, die Ergebnisse können nun \
               heruntergeladen werden. Die Quelldatei bleibt verfügbar und \
               kann jederzeit abgerufen werden.',
  'queued': 'Der Auftrag befindet sich in der Warteschlange und wird vom \
             System bearbeitet, sobald Rechenkapazität verfügbar ist.',
  'running': 'Dieser Auftrag wird gerade bearbeitet, sobald der Vorgang \
              abgeschlossen wurde, können die Ergebnisse hier heruntergeladen \
              werden.'
}


var jobsCollapsibleElement;
var jobStatusFilter;

jobsCollapsibleElement = document.getElementById("jobs-collapsible");
jobStatusFilter = '';


M.Collapsible.init(
  jobsCollapsibleElement,
  {accordion: false}
);
document.querySelectorAll('[data-job-filter]').forEach(jobFilterElement => {
  jobFilterElement.addEventListener("click", event => {
    jobStatusFilter = event.currentTarget.getAttribute("data-job-filter");
    jobListManager();
  });
});


function jobListManager() {
  jobs.forEach(job => {
    var jobElement;

    jobElement = document.getElementById(job["id"]);
    // Check whether an element with id = job['id'] is found
    if (jobElement) {
      var jobResultElement;
      var jobStatusElement;
      var jobStatusTextElement;

      jobResultElement = jobElement.querySelector('.job-result');
      jobStatusElement = jobElement.querySelector('.job-status');
      jobStatusTextElement = jobElement.querySelector('.job-status-text');

      // Check whether the job status changed since it got printed
      if (jobStatusElement.innerHTML != JOBSTATUSNAMES[job["status"]]) {
        // Update the job status element (label and color)
        jobStatusElement.innerHTML = JOBSTATUSNAMES[job["status"]];
        jobStatusElement.classList.remove("pink", "teal", "amber", "indigo");
        jobStatusElement.classList.add(JOBSTATUSCOLORS[job["status"]]);
        // Update the job status text element
        jobStatusTextElement.innerHTML = JOBSTATUSTEXTS[job["status"]];
        // Check whether the new job status is 'finished'
        if (job["status"] === "finished") {
        // Unhide the jobs result element
        jobResultElement.classList.remove("hide");
        }
      }
      // If the job status doesn't match the current filter, remove it
      //if (jobStatusFilter != "" && job["status"] != jobStatusFilter) jobElement.remove();
      // If the job status doesn't match the current filter, hide it
      if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
        jobElement.classList.add('hide');
      } else {
        jobElement.classList.remove('hide');
      }
    } else {
      // If the job status doesn't match the current filter, skip it
      //if (jobStatusFilter != "" && job["status"] != jobStatusFilter) return;
      jobElement = document.createElement("li");
      jobElement.setAttribute("id", job["id"]);
      // If the job status doesn't match the current filter, skip it
      if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
        jobElement.classList.add('hide');
      } else {
        jobElement.classList.remove('hide');
      }
      jobElement.innerHTML =
        '<div class="collapsible-header">'
          + '<i class="material-icons dropdown-indicator">arrow_drop_down</i>'
          + '<i class="material-icons">'
            + JOBSERVICEICONS[job["service"]]
          + '</i>'
          + job["name"]
          + '<span class="job-status new badge ' + JOBSTATUSCOLORS[job["status"]] + '" data-badge-caption="">'
            + JOBSTATUSNAMES[job["status"]]
          + '</span>'
        + '</div>'
        + '<div class="collapsible-body">'
          + '<p class="job-status-text">' + JOBSTATUSTEXTS[job["status"]] + '</p>'
          + '<p>&nbsp;</p>'
          + '<p class="overflow-hidden">'
            + '<i class="material-icons blue-grey-text text-darken-2 left">bookmark</i>'
            + 'Auftragskennzeichen: '
            + job["id"]
          + '</p>'
          + '<p class="overflow-hidden">'
            + '<i class="material-icons blue-grey-text text-darken-2 left">insert_drive_file</i>'
            + 'Datei: '
            + '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"] + '">'
              + job["file"]
            + '</a>'
          + '</p>'
          + '<p class="overflow-hidden">'
            + '<i class="material-icons blue-grey-text text-darken-2 left">language</i>'
            + 'Sprache: '
            + JOBLANGUAGES[job["service"]][job["language"]]
          + '</p>'
          + '<p class="job-result' + (job['status'] != 'finished' ? ' hide' : '') + ' overflow-hidden">'
            + '<i class="material-icons blue-grey-text text-darken-2 left">archive</i>'
            + 'Ergebnisse: '
            + '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"].split(".").slice(0, -1).join(".") + '_-_' + job["service"] + '.zip">'
              + 'Download'
            + '</a>'
          + '</p>'
        + '</div>';

      jobElement.querySelector('.collapsible-header').addEventListener("click", event => {
        var dropdownIndicatorElement;

        dropdownIndicatorElement = event.currentTarget.querySelector('.dropdown-indicator');
        if (dropdownIndicatorElement.innerHTML === "arrow_drop_down") {
          dropdownIndicatorElement.innerHTML = "arrow_drop_up";
        } else {
          dropdownIndicatorElement.innerHTML = "arrow_drop_down";
        }
      });
      jobsCollapsibleElement.appendChild(jobElement);
    }
  });
}


setJobsCallback = jobListManager;