var _ = require('lodash')
var plastiq = require('plastiq')
var h = plastiq.html;
var bind = plastiq.bind;

var recognition = new webkitSpeechRecognition();

var model = {
  query: '',
  contacts: [
    {name: "Paul"},
    {name: "Levan"},
    {name: "Tim"},
    {name: "Artem"},
    {name: "Josh"},
    {name: "Adrain"},
    {name: "Andrew"},
    {name: "Dereck"},
    {name: "Orfi"},
    {name: "Hibri"}
  ],
  matchingContacts: function() {
    if(this.query == '') {
      return this.contacts
    }
    return _.where(this.contacts, function(c) {
      return c.name.toLowerCase().indexOf(model.query) > -1
    })
  }
}

function voiceSearch() {
  return new Promise(function (result) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = "en-GB";
    recognition.onresult = function(event) {
      var spokenWords = '';
      for (var i = event.resultIndex; i < event.results.length; ++i) {
        spokenWords += event.results[i][0].transcript;
      }
      model.query = spokenWords;
      result();
    }
    recognition.start();
  })
}

function render(model) {
  return h('div',
    h('div',
      h('label', "search"), ' ',
      h('input', {type: 'text', value: model.query}),
      h('button', {onclick: voiceSearch}, "Search by voice")
    ),
    h('ul',
      model.matchingContacts().map(function(c) {
        return h('li', c.name)
      })
    )
  );
}

plastiq.attach(document.body, render, model);