Vue.component('results', {
  template: '#results-template',
  props: ['results', 'cols','sort_by','order_desc'],
  methods: {
    sortBy: function(col) {
    }
  }
});
Vue.component('result-cell', {
  render: function(h) {
    return h('td', this.cellContent(h));
  },
  props: ['item', 'col'],
  methods: {
    bookUrl: function(id) {
      return '/books/' + id;
    },
    authorUrl: function(id) {
      return '/authors/' + id;
    },
    seriesUrl: function(id) {
      return '/series/' + id;
    },
    link: function(h, icon, text, url) {
      return [
        h('span',{ attrs: { class: 'glyphicon glyphicon-'+icon } },''),
        ' ',
        h('a', { attrs: { href: url } }, text)
      ];
    },
    badge: function(h, num) {
      return h('span', { attrs: { class: 'badge' } }, num);
    },
    cellContent: function(h) {
      switch (this.col.id) {
      case 'name':
        return this.link(h, 'user', this.item.name, this.authorUrl(this.item.id));
      case 'count':
        return this.item.count;
      case 'title':
        return this.link(h, 'book', this.item.title, this.bookUrl(this.item.id));
      case 'authors':
        var elts = [];
        var authors = this.item.authors;
        for (i=0;i<authors.length;i++) {
          elts[i] = this.link(h, 'user', authors[i].name, this.authorUrl(authors[i].id));
        }
        return elts;
      case 'series':
        var series = this.item.series;
        if (series) {
          return [
            this.link(h, 'list', series.name, this.seriesUrl(series.id)),
            h('span', { attrs: { class: 'badge' } }, this.item.series_idx)
          ];
        }
        return '';
      default:
        console.log('ERROR unknown col: ' + this.col.id)
        return '';
      }
    }
  }
});
Vue.component('paginate', {
  template: '#paginate-template',
  props: ['page'],
  methods: {
    prevPage: function() {
    },
    nextPage: function() {
    }
  }
});
var index = new Vue({
  el: '#index',
  data: {
    page: 0,
    perpage: 20,
    sort_by: null,
    order_desc: false,
    cols: [],
    results: []
  },
  methods: {
    showSeries: function() {
      console.log("Series");
    },
    showAuthors: function() {
      this.sendQuery('/authors/', this.stdError, this.loadResults);
    },
    showBooks: function() {
      this.sendQuery('/books/', this.stdError, this.loadResults);
    },
    loadCols: function(type) {
      switch (type) {
      case 'books':
        this.cols = [
          { id: 'title', name: 'Titre', sortable: true },
          { id: 'authors', name: 'Auteur(s)' },
          { id: 'series', name: 'Serie' }
        ];
      break;
      case 'series':
        this.cols = [
          { name: 'Nom', sortId: 'name' },
          { name: 'Livre(s)' },
          { name: 'Auteur(s)' }
        ];
      break;
      case 'authors':
        this.cols = [
          { id: 'name', name: 'Nom', sortable: true },
          { id:'count', name: 'Livre(s)' }
        ];
      break;
      }
    },
    loadResults(resp) {
      this.results = [];
      this.page = 1;
      this.loadCols(resp.type);
      if (resp.results)
        this.results = resp.results;
    },
    sendQuery: function(url, error, success) {
      var xmh = new XMLHttpRequest();
      var v;
      xmh.onreadystatechange = function() {
        v = xmh.responseText;
        if (xmh.readyState === 4 && xmh.status === 200) {
          var res;
          try  {
            res = JSON.parse(v);
          } catch (err) {
            if (null !== error)
              error(err.name, err.message);
          }
          if (null !== success)
            success(res);
        } else if (xmh.readyState === 4) {
          if (null !== error)
            error(xmh.status, v);
        }
      };
      xmh.open('GET', url, true);
      xmh.setRequestHeader('Accept','application/json');
      xmh.send(null);
    },
    stdError: function(code, resp) {
      console.log('ERROR ' + code + ': ' + resp);
    }
  }
});