class View {
	charLimit = 70;

	constructor() {
		this.form   = document.querySelector("#add_form")
		this.input  = document.querySelector("#input_todo")
		this.list   = document.querySelector("#todos_list")
		this.tabs   = document.querySelectorAll("#add_form span a")
		this.loader = document.querySelector("#loader")
		this.count = document.querySelector("#count")
		
		
		this.input.addEventListener("input", (e) => {
			if (e.target.value.length >= this.charLimit) {
				e.target.value = e.target.value.substring(0,this.charLimit);
			}
			count.textContent = e.target.value.length;
		});
		count.nextSibling.textContent = `/${this.charLimit} characters`
	}

	#getTodo() {
		return this.input.value
	}

	#resetInput() {
		this.input.value = ''
		count.textContent = 0
	}

	#createNewTodoElement(todo){
		let li = document.createElement("li")

		// TODO

		return li
	}


	setFilterTabs(filter){
		this.tabs.forEach( tab => {
			if (filter === tab.id)		
				tab.classList.add("is-active")
			else 
				tab.classList.remove("is-active")
		})
	}

	renderTodoList(todos) {
		let list = new DocumentFragment()
		for (let todo of todos){
			list.appendChild(this.#createNewTodoElement(todo))
		}
		this.list.replaceChildren(list)
	}




	/** Abonnements événements **/

	bindAddTodo(handler) {
		this.form.addEventListener("submit", (e=>{
			e.preventDefault()
			let text = this.#getTodo()
			handler(text)
			this.#resetInput()
		}))
	}


	bindDeleteTodo(handler) {
		// TODO
	}

	bindEditTodo(handler) {
		// TODO
	}

	bindToggleTodo(handler) {
		// TODO
	}
}