// TODO: reorder
let currentDraggedItem = null;

const attachDragEvents = (element)=>{
	element.addEventListener('dragstart', (event)=>{
		currentDraggedItem = event.target;
	})
	element.addEventListener('dragover', (event)=>{
		event.preventDefault()
		event.stopPropagation()
		event.currentTarget.classList.add('draggedOver');
	})
	element.addEventListener('dragleave', (event)=>{
		event.currentTarget.classList.remove('draggedOver');
	})
	element.addEventListener('drop', (event)=>{
		event.stopPropagation()
		event.currentTarget.classList.remove('draggedOver');
		event.currentTarget.querySelector('ul').appendChild(currentDraggedItem)
	})
}

const deleteItem = (event)=>{
	event.currentTarget.closest('li').remove()
}

const updateItem = (event)=>{
	event.preventDefault()
	const newValue = event.currentTarget.parentNode.querySelector('input').value
	event.currentTarget.closest('li').querySelector('h2').innerHTML = newValue
}

const createNewItem = (event)=>{
	const template = document.querySelector('template').content.querySelector('li');
	const newItem = template.cloneNode(true)

	newItem.querySelector('.add').addEventListener('click',createNewItem); 
	newItem.querySelector('.delete').addEventListener('click',deleteItem);
	newItem.querySelector('form').addEventListener('submit',updateItem);
	attachDragEvents(newItem)

	if(event){
		event.currentTarget.closest('li').querySelector('ul').appendChild(newItem)
	} else {
		document.querySelector('ul').appendChild(newItem)
	}
}

for(let i = 0; i < 5; i++){
	createNewItem()
}
attachDragEvents(document.querySelector('body'))