var Talker = (function ($) {
  var speech = window.speechSynthesis, 
      ret = {
        nope: false
      }, 
      keyDown = {},
      voices = [],
      selectedVoice = null,
      phrases = [
        "Guten Morgen! Was gibt es zum Frühstück?",
        "Okey dokey.",
        "Hello world.",
        "Cheeseburger in paradise.",
      ],
      body,
      app, 
      phrasesElement, 
      voicesElement, 
      selectedVoiceElement, 
      phraseTextbox,
      phraseButton,
      errorBlock
  
  if (typeof speech === 'undefined') {
    console.error("window.speechSynthesis doesn't exist.  Please try a different browser that supports this feature.")
    ret.nope = true
  }

  function populateVoiceList() {
    var newVoices = speech.getVoices()
    if (!selectedVoice && newVoices && newVoices.length > 0) {
      voices = newVoices
      selectedVoice = voices[0]
      render()
    }
  }

  function speak(phrase) {
    if ( ! (phrase && /\w/i.test(phrase) && selectedVoice)) return
    speech.cancel()
    let utterance = new SpeechSynthesisUtterance(phrase)
    utterance.voice = selectedVoice
    speech.speak(utterance)
  }
  
  function render() {
    voicesElement.html('')
    phrasesElement.html('')
    selectedVoiceElement.html('')
    
    if (ret.nope) {
      $(".box").hide()
      errorBlock.show()
      return
    }
    
    for (let i in phrases) {
      let phrase = phrases[i]
      let button = $("<button></button>")
      button.data('phrase', phrase)
      button.text(phrase)
      button.append('<span class="close"/>')
      phrasesElement.append(button)
    }    
    for (let i in voices) {
      let voice = voices[i]
      if (!voice || !voice.name) {
        continue
      }
      let voiceEl = $("<button />")
      voiceEl.html(voice.name)
      voiceEl.data('voice', voice)
      if (selectedVoice && selectedVoice.name) {
        
      }
      voicesElement.append(voiceEl)
    }
    if (selectedVoice && selectedVoice.name) {
      selectedVoiceElement.html(`Current voice: <strong>${selectedVoice.name}</strong>`)
    }
  }
  
  function onPhraseClick(e) {
    var me = $(e.currentTarget)
    e.preventDefault()
    var phrase = me.data('phrase')
    if (phrase) {
      phraseTextbox.val(phrase)
      speak(phrase)
    }
  }
  
  function onVoiceClick(e) {
    var me = $(e.currentTarget)
    e.preventDefault()
    var voice = me.data('voice')
    if (voice && voice.name) {
      selectedVoice = voice
    }
    render()
    if (keyDown['Shift']) {
      let phrase = phraseTextbox.val()
      if (phrase && typeof phrase === 'string') {
        speak(phrase)
      }
    }
  }
  
  function onPhraseButtonClick(e) {
    e.preventDefault()
    processNewPhrase()
  }
  
  function onPhraseCloseClick(e) {
    e.preventDefault()
    e.stopPropagation()
    var phrase = $(e.currentTarget).parent().data('phrase')
    if (phrase && (keyDown['Shift'] || confirm('Really remove this phrase?'))) {
      phrases = phrases.filter((el) => el !== phrase)
      render()
    }
  }
  
  function processNewPhrase() {
    var newPhrase = phraseTextbox.val()
    if (newPhrase && /\w/i.test(newPhrase)) {
      if (!phrases.includes(newPhrase)) {
        phrases.unshift(newPhrase)
      }
      render()
      speak(newPhrase)
    }
  }
  
  function onPhraseTextboxKeyPress(e) {
    e.stopPropagation()
    // console.log('onPhraseTextboxKeyPress', e)
    switch (e.keyCode) {
      case 13:
        e.preventDefault()
        processNewPhrase()
        break;
    }
  }
  
  function onAppKeyPress(e) {
    // console.log(e)
    switch (e.key) {
      case 's':
      case 'Enter':
        let phrase = phraseTextbox.val()
        if (phrase) {
          speak(phrase)
        }
        break
      case 'x':
        speech.cancel()
        break
    }
  }
  
  function onAppKeyDown(e) {
    // console.log(`key down: ${e.key}`)
    keyDown[e.key] = true
  }  
  function onAppKeyUp(e) {
    keyDown[e.key] = false
  }
  
  function ready() {
    app = $("#app")
    body = $('body')

    errorBlock = app.find('.block[aria-label="error"]')
    phrasesElement = app.find('.phrases')
    voicesElement = app.find('.voices')
    selectedVoiceElement = app.find('.current-voice')
    phraseTextbox = app.find('#phrase')
    phraseButton = app.find('#phraseButton')
    
    if (ret.nope) {
      render()
      return
    }

    body.on('keypress', onAppKeyPress)
    body.on('keydown', onAppKeyDown)
    body.on('keyup', onAppKeyUp)
    
    app.on('click', '.phrases button', onPhraseClick)
    app.on('click', '.phrases button .close', onPhraseCloseClick)
    app.on('click', '.voices button', onVoiceClick)
    phraseTextbox.on('keypress', onPhraseTextboxKeyPress)
    phraseButton.on('click', onPhraseButtonClick)
    
    populateVoiceList()
    speech.onvoiceschanged = populateVoiceList  
    
    render()
  }
  
  $(ready)
  return ret
})(jQuery)