class HomeworkVocabularyTask extends HomeworkElement {
	constructor (id, source, target) {
    super()
    this.innerHTML =
    `
      <input type="text" class="source-language" name="source-language">
      <input type="text" class="target-language" name="target-language">
      <img src="/images/times.svg" id="delete">
      <img src="/images/check-circle.svg" class="disabled" id="correct">
      <img src="/images/times-circle.svg" class="disabled" id="incorrect">
    `
    this.id = id
    this.sourceText = source
    this.targetText = target
    console.log(this.targetText)
    this.setAttribute("result", "unknown")
    this.setAttribute("state", "edit")
    this.deleteButton = this.querySelector('img#delete')
    this.deleteButton.addEventListener("click", this.deleteTask.bind(this))
    this.sourceInput = this.querySelector("input.source-language")
    this.sourceInput.value = this.sourceText
    this.targetInput = this.querySelector("input.target-language")
    this.targetInput.value = this.targetText
    this.targetInput.addEventListener("keypress", this.evaluate.bind(this))
  }

  connectedCallback() {
    console.log("New task added to page")
  }

  static get observedAttributes () { 
      return [ "result", "state" ] 
  }

  attributeChangedCallback(name, oldValue, newValue) {
    switch(name) {
      case "result":
        console.log("Result changed")
        break
      case "state":
        console.log("State changed")
        break
      default:
        console.log("Unhandled attribute: '" + name + "'")
    }
  }

  get state () {
    return this.getAttribute("state")
  }

  set state (state) {
    this.setAttribute("state", "train")
    this.targetInput.value = ""
  }

  setFocus() {
    this.targetInput.focus()
  }

  deleteTask() {
    console.log("Delete line")
    this.dispatchEvent(new CustomEvent("delete", {detail:{id: this.id}, bubbles: true, cancelable: true}))
  }

  getId() {
    return this.id
  }

  setSourceText(text) {
    this.sourceInput.value = text
  }

  setTargetText(text) {
    this.targetInput.value = text
  }

  evaluate(event) {
    if(this.state === "train" && event.key === "Enter") {
      console.log("Evaluating '" + this.targetText + "' against entered '" + this.targetInput.value + "'")
      if(this.targetInput.value == this.targetText) {
        console.log("Correct")
        this.setAttribute("result", "correct")
      } else {
        console.log("Not correct")
        this.setAttribute("result", "incorrect")
      }
      if(this.nextElementSibling != null) {
        this.nextElementSibling.setFocus()
      }
    }
  }
}
customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)