"use strict";

function ready(callback) {
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', callback);
	} else {
		callback();
	}
}

ready(() => {
	let channel = document.querySelector('meta[name=channel]').content;
	let template = document.querySelector('#message').content;

	document.querySelectorAll('link[rel=events]').forEach(elem => {
		let url = elem.getAttribute("href");
		let source = new EventSource(url);
		source.addEventListener('message', message => {
			let body = JSON.parse(message.data);

			if (body.channel === channel) {
				document.querySelectorAll('.messages').forEach(elem => {
					let message = template.cloneNode(true);

					message.querySelectorAll('.sender')
						.forEach(elem => elem.textContent = body.sender.name);
					message.querySelectorAll('.message')
						.forEach(elem => elem.textContent = body.body);
					message.querySelectorAll('.sent_at')
						.forEach(elem => elem.textContent = body.sent_at);

					message.childNodes.forEach(node => elem.appendChild(node));
				});
			}
		});
	});
})