const web = new Vue({
  el: '#web',
  data: {
    word: '',
    timer: undefined,
    definitions: null,
    is_word: null,
    placeholders: ['mot', 'bonjour', 'manger', 'rire', 'jour', 'gagner', 'chanter', 'danser', 'village',
                   'France', 'baguette', 'cola', 'marguerite']
  },
  methods: {
    searchWord: function() {
      if(!this.word) return;
      if(this.timer) {
        clearTimeout(this.timer);
        this.timer = undefined;
      }
      fetch(`/def?w=${this.word}`)
        .then((response) => {
          this.is_word = response.ok;

          if( response.ok ) {
            response.arrayBuffer().then(res => {
              this.definitions = msgpack.decode(new Uint8Array(res));
              if( this.definitions && this.definitions[0] && this.definitions[0].mot) {
                if(!this.word.includes('_')) {
                  this.word = this.definitions[0].mot;
                }
              }
            });
          }
      })
    },
    rand: (min,max) =>
      Math.floor(Math.random()*(max-min+1)+min)
    ,
    randomplaceholder: function() {
      const r = this.rand(0, this.placeholders.length-1);
      const a = this.placeholders[r];

      return a;
    },
  },
  watch: {
    word: function(w) {
      if( w === '' ) {
        this.is_word = null;
      }
      if(this.timer) {
        clearTimeout(this.timer);
        this.timer = undefined;
      }
      this.timer = setTimeout(this.searchWord, 800);
    }
  },
  mounted: function() {
    const param = window.location.search.substr(1);

    param.split('&').forEach( p => {
      if (p.startsWith('w=')) {
        this.word = p.slice(2);
      }
    });
  }
});