(function collonadeClosure() {
  'use strict';

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

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

    function setupSorting(wrapper) {

      var table = wrapper.querySelector('#' + #{String $ wIdent "table-only"}.replace('-table-only', ''));
      var ths = Array.from(table.querySelectorAll('th'));

      // attach click handler to each table-header
      ths.forEach(function(th) {
        th.addEventListener('click', clickHandler);
        // TODO: Remove this forEach once column-description is link
        Array.from(th.querySelectorAll('a')).forEach(function(a) {
          a.style.display = 'none';
        })
      });

      // handles click on table header
      function clickHandler(event) {
        event.preventDefault();
        var link = this.querySelector('a');
        if (!link) {
          return false;
        }
        var href = link.getAttribute('href');
        var url = new URL(window.location.origin + window.location.pathname + href);
        var order = this.dataset.order || ASC;
        url.searchParams.set(#{String $ wIdent "table-only"}, 'yes');
        updateTableFrom(url);
        markAsSorted(this, order);
      }

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

      function replaceContent(content) {
        wrapper.innerHTML = content;
        setupSorting(wrapper);
      }

      // fetches new sorted table from url with params and replaces contents of current table
      function updateTableFrom(url) {
        fetch(url, {
          credentials: 'same-origin',
          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
          replaceContent(data);
          table.querySelector('tbody').innerHTML = data;
        }).catch(function(err) {
          console.error(err);
        });
      }

    }

    // TODO: how to get 'terms' only?
    var selector = #{String $ wIdent "table-only"}.replace('-only', '-wrapper');
    setupSorting(document.querySelector('#' + selector));
  });
})();