const cardTemplate = document.getElementById('event-card');
const eventsContainer = document.getElementById('events-container');
const mainContainer = document.getElementById('container');


async function main() {
	const query = {
		sort: 'start',
	};

	const stringifiedQuery = Qs.stringify({
		...query
	},
	{
		addQueryPrefix: true
	}
	);

	const events = await (await fetch(`/api/events${stringifiedQuery}`)).json();

	let currentDate;
	let currentContainer;

	for (const event of events.docs) {
		if (currentDate !== event.startDate) {
			currentContainer && mainContainer.append(currentContainer);

			const c = eventsContainer.content.cloneNode(true);

			c.querySelector('.events-container-title').innerText = event.startDate;

			currentContainer = c;
		}

		currentDate = event.startDate;

		const card = cardTemplate.content.cloneNode(true);

		card.querySelector('.event-name').innerText = event.name;

		const typeElem = card.querySelector('.event-type');
		typeElem.innerText = event.type.value.name;
		typeElem.style.backgroundColor = event.type.value.backgroundColour;

		card.querySelector('.event-date .event-start').innerText = event.startDate;
		card.querySelector('.event-time .event-start').innerText = event.startTime;

		if (event.end) {
			if (event.endDate !== event.startDate) {
				card.querySelector('.event-date .event-end').innerText = event.endDate;
				card.querySelector('.event-date .event-time-seperator').style.display = 'inline';
			}

			card.querySelector('.event-time .event-end').innerText = event.endTime;
			card.querySelector('.event-time .event-time-seperator').style.display = 'inline';
		}

		card.querySelector('a.event-link').setAttribute('href', event.id);

		currentContainer.querySelector('.grid').append(card);
	}

	currentContainer && mainContainer.append(currentContainer);
}

main();