function refreshHeight(elem) {
	elem.style.maxHeight = `${elem.scrollHeight}px`;
}
function validate(form) {
	var valid = true;
	if (form['artist'].value == '') {
		form['artist'].parentElement.setAttribute('error',
			'Se necesita el nombre del artista');
		valid = false;
	}
	if (form['album'].value == '' && form['track'].value == '') {
		form['album'].parentElement.setAttribute('error',
			'Se necesita al menos uno de entre «canción» o «áblum»');
		form['track'].parentElement.setAttribute('error',
			'Se necesita al menos uno de entre «canción» o «áblum»');
		valid = false;
	}
	refreshHeight(form.closest('.action-wrap'));
	return valid;
}

function deleteSong() {
	var button = this;
	var data   = button.closest('.data-elem');
	var index  = data.getAttribute('data-info');
	if (confirm('¿Seguro?')) {
		fetch(`del?p=${index}`).then(response => {
			var wrap = button.closest('.action-wrap');
			if (response.ok) {
				data.parentElement.removeChild(data);
			} else {
				button.closest('.action')
					.setAttribute('result', 'Error en la solicitud');
			}
			refreshHeight(wrap);
		});
	}
}

fetch('../list')
	.then(response => {
		if (response.ok) {
			return response.json();
		}
	})
	.then(list => {
		list.forEach((elem, index) => {
			var newButton = document.createElement('button');
			var title = elem['track'] == undefined ? elem['album'] : elem['track'];
			newButton.setAttribute('class', 'data-elem');
			newButton.onclick = deleteSong;
			newButton.setAttribute('data-info', index);
			newButton.innerText = `${elem['artist']} - ${title}`;
			document.querySelector('#dellist').appendChild(newButton);
		});
	})
	.catch(reason => console.log(reason));

document.querySelectorAll('.action-wrap').forEach(elem => {
	var cajetin = elem.querySelector('.cajetin');
	elem.setAttribute('collapsed', 'true');
	elem.style.maxHeight = `${cajetin.scrollHeight}px`;
	cajetin.onclick = function() {
		var form = elem.querySelector('form');
		if (elem.getAttribute('collapsed') == 'true') {
			refreshHeight(elem);
			elem.setAttribute('collapsed', 'false');
		} else {
			elem.style.maxHeight = `${cajetin.scrollHeight}px`;
			elem.setAttribute('collapsed', 'true');
		}
	}
});

document.querySelectorAll('.form-elem > input').forEach(elem => {
	elem.addEventListener('input', () => {
		elem.parentElement.removeAttribute('error');
		elem.closest('form').removeAttribute('result');
		refreshHeight(elem.closest('.action-wrap'));
	});
});

const add = document.querySelector('#add');
add.addEventListener('submit', (event) => {
	event.preventDefault();
	if (validate(add)) {
		var xmlHttp = new XMLHttpRequest();
		var json = {}
		var data = new FormData(add);
		data.forEach((v, k) => json[k] = v);
		if (!json['date']) {
			const date = new Date(Date.now());
			const year  = `${date.getFullYear()}`;
			const month = `${date.getMonth() < 10 ? '0' : '' }${date.getMonth()+1}`;
			const day = `${date.getDate() < 10 ? '0' : '' }${date.getDate()+1}`;
			json['date'] = `${year}-${month}-${day}`;
		}
		fetch('add', {
			method: 'POST',
			body: JSON.stringify(json),
			headers: {
				'Content-Type': 'application/json'
			}
		}).then(response => {
			if (response.ok) {
				add.setAttribute('result', 'Canción añadida');
			} else {
				add.setAttribute('result', 'Error en la solicitud');
			}
			refreshHeight(add.closest('.action-wrap'));
		});
	}
	return false;
});