(function () {
'use strict';

  if (!Element.prototype.matches) {
    Element.prototype.matches = Element.prototype.msMatchesSelector;
  }
  function $qs(qs, el) {
    return (el||document).querySelector(qs);
  }
  function $on(selector, eventname, cb) {
    if (!$on._events[eventname]) {
      $on._events[eventname] = $on._dispatcher(eventname);
      document.addEventListener(eventname, $on._events[eventname]);
    }
    if (!$on._handlers[eventname]) {
      $on._handlers[eventname] = {};
    }
    if (!$on._handlers[eventname][selector]) {
      $on._handlers[eventname][selector] = [];
    }
    $on._handlers[eventname][selector].push(cb);
  }
  $on._events = {};
  $on._handlers = {};
  $on._dispatcher = function (eventname) {
    return function (ev) {
      //console.log('event: ' + ev.type);
      if (!$on._handlers[eventname]) {
        console.warn('no handlers for event');
        return;
      }
      var matches = Object.keys($on._handlers[eventname]).some(function (selector) {
        if (ev.target.matches(selector)) {
          $on._handlers[eventname][selector].forEach(function (cb) { cb(ev); });
          return true;
        }
      });
      if (matches) {
        console.warn("no handlers for selector");
      }
    };
  };

  function verifyAuth(/*ev*/) {
    auth = $qs('input.js-jwt').value;
    return window.fetch(
      '/api/verify-auth'
    , { method: 'GET'
      , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
      }
    ).then(function (resp) {
      return resp.json().then(function (data) {
        if (data.error) {
          localStorage.removeItem('auth');
          console.error(data.error);
          window.alert('Bad HTTP Response: ' + data.error.message);
          throw new Error('Bad HTTP Response: ' + data.error.message);
        }

        console.log('verify-auth:');
        console.log(data);

        localStorage.setItem('auth', auth);

        return fetchPeers(auth).then(function () {
          return fetchZones(auth);
        });
      });
    });
  }
  function fetchPeers(auth) {
    return window.fetch('/api/peers', {
      method: 'GET'
    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
    }).then(function (resp) {
      return resp.json().then(function (data) {
        var tpl = '';
        var el;
        if (!tpls.peer) {
          tpls.peer = $qs('.js-peer-tpl').innerHTML;
        }
        data.peers.forEach(function (peer) {
          el = document.createElement('div');
          el.innerHTML = tpls.peer;
          console.log(el);
          console.log($qs('.js-peer-name', el));
          $qs('.js-peer-name', el).innerText = peer.name;
          $qs('.js-peer-name', el).dataset.id = peer.name;
          console.log(el.innerHTML);
          tpl += el.innerHTML;
          console.log(tpl);
        });
        $qs('.js-peer-tpl').innerHTML = tpl;
        console.log($qs('.js-peer-tpl').innerHTML);
      });
    });
  }
  function fetchZones(auth) {
    return window.fetch('/api/zones', {
      method: 'GET'
    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
    }).then(function (resp) {
      return resp.json().then(function (data) {
        var tpl = '';
        var el;
        if (!tpls.zone) {
          tpls.zone = $qs('.js-zone-tpl').innerHTML;
        }
        data.zones.forEach(function (zone) {
          el = document.createElement('div');
          el.innerHTML = tpls.zone;
          console.log(el);
          console.log($qs('.js-zone-name', el));
          $qs('.js-zone-name', el).innerText = zone.id;
          $qs('.js-zone-name', el).dataset.id = zone.id;
          console.log(el.innerHTML);
          tpl += el.innerHTML;
          console.log(tpl);
        });
        $qs('.js-zone-tpl').innerHTML = tpl;
        console.log($qs('.js-zone-tpl').innerHTML);
      });
    });
  }
  function fetchRecords(zone) {
    return window.fetch('/api/zones/' + zone + '/records', {
      method: 'GET'
    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
    }).then(function (resp) {
      return resp.json().then(function (data) {
        var tpl = '';
        var el;
        if (!tpls.record) {
          tpls.record = $qs('.js-record-tpl').innerHTML;
        }
        data.records.forEach(function (record) {
          el = document.createElement('div');
          el.innerHTML = tpls.record;
          console.log(el);
          console.log($qs('.js-record-name', el));
          $qs('.js-record-type', el).innerText = record.type;
          $qs('.js-record-name', el).innerText = record.name;
          console.log(el.innerHTML);
          tpl += el.innerHTML;
          console.log(tpl);
        });
        $qs('.js-record-tpl').innerHTML = tpl;
        console.log($qs('.js-record-tpl').innerHTML);
      });
    });
  }

  // BEGIN
  var tpls = {};
  var auth = localStorage.getItem('auth');
  if (auth) {
    $qs('input.js-jwt').value = auth;
    verifyAuth();
  }

  $on('body', 'click', function () {
    console.log('woo-hoo, that tickles my body!');
  });

  $on('button.js-jwt', 'click', verifyAuth);

  $on('input.js-zone', 'keyup', function (ev) {
    $qs('code.js-zone').innerHTML = ev.target.value || ':zone';
    // $qs('a.js-zone').setAttribute('data-href', ...)
    $qs('a.js-zone').href =
      $qs('a.js-zone').dataset.href.replace(/:zone/, ev.target.value || ':zone');
  });

  $on('input.js-name', 'keyup', function (ev) {
    $qs('code.js-name').innerHTML = ev.target.value || ':name';
    $qs('a.js-name').href =
      $qs('a.js-name').dataset.href.replace(/:name/, ev.target.value || ':name');
  });

  $on('button.js-zone-name', 'click', function (ev) {
    var zone = ev.target.dataset.id;
    return fetchRecords(zone);/*.then(function () {
    });*/
  });

}());