import Task           from "./tasks/task.js"
import TaskView       from "./tasks/view.js"
import DetailTaskView from "./tasks/detail_view.js"

class MainView extends EventTarget {
  constructor(){
    super()
    this.task_views = []

    this.list_element = document.querySelector("task-list")
    this.detail_view = new DetailTaskView(document.querySelector("task-detail"))

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

    this.addButton = document.querySelector('#add_button')
    this.addButton.addEventListener("click", () => {
      this.dispatchEvent(new CustomEvent("add_task"))
    })
  }

  addTaskView(task){
    let view = new TaskView(task)
    view.element.addEventListener("click", () => this.detail_view.task = task )
    this.list_element.appendChild(view.element)
    this.task_views.push(view)
  }

  removeTaskView(task){
    let summary_view_for_deleted_task = this.task_views.find((summary_view) => summary_view.task === task)
    this.task_views.remove(summary_view_for_deleted_task)
    this.list_element.removeChild(summary_view_for_deleted_task.element)
  }
}

export default MainView