function renderPlaylist(playlist) {
	const playlistDiv = document.getElementById('playlist');

	const fragment = document.createDocumentFragment();

	const tableHeader = document.createElement('tr');
	tableHeader.innerHTML = '<th>X</th><th>Y</th><th>Zoom 0-16384</th><th>Pan Speed 1-18</th><th>Tilt Speed 1-14</th><th>Delay</th>';
	fragment.appendChild(tableHeader);

	for (let i = 0; i < playlist.length; i++) {
		const row = document.createElement('tr');

		row.innerHTML = `
			<td><input type="number" value="${playlist[i].x}"></td>
			<td><input type="number" value="${playlist[i].y}"></td>
			<td><input type="number" value="${playlist[i].zoom}"></td>
			<td><input type="number" value="${playlist[i].vs}"></td>
			<td><input type="number" value="${playlist[i].hs}"></td>
			<td><input type="number" value="${playlist[i].delay}"></td>
			<td><button onclick="setPost(${i})">Goto</button></td>
			<td><button onclick="this.parentElement.parentElement.remove()">Remove</button></td>
		`;

		fragment.appendChild(row);
	}

	playlistDiv.replaceChildren(fragment);
}

async function fetchPlaylist() {
	const response = await fetch('/playlist');
	const playlist = await response.json();

	return playlist;
}

async function main() {
	renderPlaylist(await fetchPlaylist());
}

main();

async function setPost(index) {
	const playlistDiv = document.getElementById('playlist');
	const row = playlistDiv.children[index + 1];
	const inputs = row.children;
	const x = parseInt(inputs[0].children[0].value);
	const y = parseInt(inputs[1].children[0].value);
	const zoom = parseInt(inputs[2].children[0].value);
	const vs = parseInt(inputs[3].children[0].value);
	const hs = parseInt(inputs[4].children[0].value);

	const response = await fetch('/setpos', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({ x, y, zoom, vs, hs })
	});
}

function getPlaylist() {
	const playlist = [];
	const playlistDiv = document.getElementById('playlist');
	const children = playlistDiv.children;
	for (let i = 1; i < children.length; i++) {
		const row = children[i];
		const inputs = row.children;
		playlist.push({
			x: parseInt(inputs[0].children[0].value),
			y: parseInt(inputs[1].children[0].value),
			zoom: parseInt(inputs[2].children[0].value),
			vs: parseInt(inputs[3].children[0].value),
			hs: parseInt(inputs[4].children[0].value),
			delay: parseInt(inputs[5].children[0].value)
		});
	}

	return playlist;
}

async function sendPlaylist(playlist) {
	const response = await fetch('/playlist', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify(playlist)
	});
}

document.getElementById('update').addEventListener('click', () => { sendPlaylist(getPlaylist()); });
document.getElementById('run').addEventListener('click', () => fetch('/run', { method: 'POST' }));
document.getElementById('addRow').addEventListener('click', () => {
	let playlist = getPlaylist();
	playlist.push({ x: 0, y: 0, zoom: 0, vs: 18, hs: 14, delay: 1000 });
	renderPlaylist(playlist);
});