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

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

  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.sourceText.value = text
  }

  setTargetText(text) {
    this.targetText.value = text
  }
}
customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)