let TranslationFormHook = {

  mounted() {
    this.el.addEventListener("keyup", this.keyupHandler.bind(this))
    this.title_input = this.el.querySelector("#translation-form_title")
    this.tunit_editor = this.el.querySelector("#tunit-editor-content")
    this.save_edit_button = this.el.querySelector("#save-edit-button")
    this.save_publish_button = this.el.querySelector("#save-publish-button")
    let article_preview_links = document.querySelectorAll(".article-preview a")
    article_preview_links.forEach(el => el.addEventListener('click', e => e.preventDefault()))
  },
  keyupHandler(e) {
    var push_event = true
    var preaction = () => { }
    var postaction = () => { }
    var payload = {}
    if (e.altKey){
      if (e.ctrlKey){
        if (e.key == "s"){
          this.save_edit_button.click()
        } else if (e.key == "p"){
          this.save_publish_button.click()
        }
      } else {
        if (e.key == "ArrowDown" || e.key == "n"){
          preaction = () => { this.title_input.focus() }
          postaction = () => { this.tunit_editor.focus() }
          var handler = "select_next_tunit"
        } else if (e.key == "ArrowUp" || e.key == "v"){
          preaction = () => { this.title_input.focus() }
          postaction = () => { this.tunit_editor.focus() }
          var handler = "select_previous_tunit"
        } else if (e.key == "u") {
          var handler = "tunit_status"
          payload = {status: "untranslated"}
        } else if (e.key == "p") {
          var handler = "tunit_status"
          payload = {status: "passable"}
        } else if (e.key == "o") {
          var handler = "tunit_status"
          payload = {status: "done"}
        } else {
          push_event = false
        }
        if (push_event) {
          preaction.call()
          this.pushEventTo(this.el, handler, payload, postaction)
        }
      }
    }
  },
}

export {TranslationFormHook}