class TaskView {
  static template = `
    <input type="checkbox" name="done"/> 
    <task-description> -- </task-description>
  `

  constructor(task){
    this.task = task
    this.element = document.createElement("task-summary")
    this.element.innerHTML = this.constructor.template

    this.fields = {
      done: this.element.querySelector("[name=done]"),
    }

    this.update()

    this.task.addEventListener("change", () => this.update())

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

  update() {
    this.fields.done.checked = this.task.done
    this.element.querySelector("task-description").innerText = this.task.description
  }
}

export default TaskView