(function collonadeClosure() {
  'use strict';

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

    console.log('dbtable', e);

    if (e.detail.module && e.detail.module !== 'dbtable')
      return;

    function setupAsync(wrapper) {

      var table = wrapper.querySelector('#' + #{String $ dbtIdent});
      if (!table)
        return;
        
      var ths = Array.from(table.querySelectorAll('th.sortable'));
      var pagination = wrapper.querySelector('#' + #{String $ dbtIdent} + '-pagination');

      ths.forEach(function(th) {
        th.addEventListener('click', clickHandler);
      });

      if (pagination) {
        Array.from(pagination.querySelectorAll('.pagination-link'))
          .forEach(function(p) {
            p.addEventListener('click', clickHandler);
          });
      }

      function clickHandler(event) {
        event.preventDefault();
        var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this));
        updateTableFrom(url);


        ths.forEach(function(th) {
          // th.removeEventListener('click', clickHandler);
          console.log('removed handler from', th);
        });
      }

      function getClickDestination(el) {
        console.log(el);
        if (!el.querySelector('a')) {
          return false;
        }
        return el.querySelector('a').getAttribute('href');
      }

      // 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',
            #{String (toPathPiece HeaderDBTableShortcircuit)}: #{String dbtIdent}
          }
        }).then(function(response) {
          if (!response.ok) {
            throw ('Looks like there was a problem fetching ' + url.toString() + '. Status Code: ' + response.status);
          }
          return response.text();
        }).then(function(data) {
          // remove listeners
          ths.forEach(function(th) {
            th.removeEventListener('click', clickHandler);
          });

          // replace contents of table body
          wrapper.innerHTML = data;

          // set up async functionality again
          wrapper.classList.remove("js-initialized");
          document.dispatchEvent(new CustomEvent('setup', {
            detail: { scope: wrapper },
            bubbles: true,
            cancelable: true
          }));
          // table.querySelector('tbody').innerHTML = data;
        }).catch(function(err) {
          console.error(err);
        });
      }

      wrapper.classList.add("js-initialized");
    }

    var selector = '#' + #{String $ dbtIdent} + '-table-wrapper:not(.js-initialized)';
    var wrapperEl = e.detail.scope.querySelector(selector);
    if (wrapperEl)
      setupAsync(wrapperEl);
    else if (e.detail.scope.matches(selector))
      setupAsync(e.detail.scope);
  });
})();

document.addEventListener('DOMContentLoaded', function() {
  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'dbtable' }, bubbles: true, cancelable: true }));
});