class DetailTaskView extends EventTarget {
  constructor(element){
    super()
    this.element = element
    this.fields = {
      done: this.element.querySelector("[name=done]"),
      description: this.element.querySelector("[name=description]")
    }

    this.fields.description.addEventListener("input", () => {
      this.task.description = this.fields.description.value
    })

    this.fields.done.addEventListener("change", () => {
      this.task.done = this.fields.done.checked
    })

    this.deleteButton = this.element.querySelector("#delete_button")

    this.deleteButton.addEventListener("click", () => {
      this.dispatchEvent(new CustomEvent("delete_task", {detail: {task: this.task}}))
    })
  }

  get task(){
    return this._task
  }

  set task(new_task){
    this._task = new_task
    this._task.addEventListener("change", () => this.update())
    this.update()
  }

  update() {
    this.fields.done.checked = this.task.done
    this.fields.description.value = this.task.description
  }
}

export default DetailTaskView