(function collonadeClosure() {
  'use strict';

  document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {

    var ASC = 'asc';
    var DESC = 'desc';

    // TODO: Make use of interpolated dbtIdent
    var table = document.querySelector('table');
    var ths = Array.from(table.querySelectorAll('th'));

    // attach click handler to each table-header
    ths.map(function(th) {
      var link = th.querySelector('a');
      if (link) {
        link.addEventListener('click', clickHandler);
      }
    });

    // handles click on table header
    function clickHandler(event) {
      event.preventDefault();
      var url = new URL(window.location.origin + window.location.pathname + this.getAttribute('href'));
      var order = this.parentNode.dataset.order || ASC;
      // TODO: not working here... getting whole page as response...
      url.searchParams.set('table-only', 'true');
      updateTableFrom(url);
      markSorted(this.parentNode, order);
    }

    function markSorted(th, order) {
      ths.forEach(function(th) {
        th.classList.remove('sorted-asc', 'sorted-desc');
      });
      th.classList.add('sorted-' + order);
      th.dataset.order = order;
    }

    // fetches new sorted table from url with params and replaces contents of current table
    function updateTableFrom(url) {
      fetch(url, {
        headers: {
          'Accept': 'text/html'
        }
      }).then(function(response) {
        var contentType = response.headers.get("content-type");
        if (!response.ok) {
           throw ('Looks like there was a problem fetching ' + url.toString() + '. Status Code: ' + response.status);
         }
         return response.text();
       }).then(function(data) {
         // replace contents of table body
         table.querySelector('tbody').innerHTML = data;
      }).catch(function(err) {
        console.error(err);
      });
    }

  });
})();