/* global document */
/* global io */
/* eslint no-console: 0 */
/* eslint no-unused-vars: ["error", { "args": "none" }]*/

var consoleEl = document.querySelector('.js-console-container');

function createFragment(htmlStr) {
	var frag = document.createDocumentFragment(),
		temp = document.createElement('div');
	temp.innerHTML = htmlStr;
	while (temp.firstChild) {
		frag.appendChild(temp.firstChild);
	}
	return frag;
}

const connectButton = document.querySelector('#connect');
const passwordElement = document.querySelector('#password');
connectButton.addEventListener('click', function() {
	var socket = io({
		auth: {
			token: passwordElement.value,
		},
	});
	socket.on('log', function (progress) {
		connectButton.disabled = true;
		var fragment = createFragment('<samp>' + progress + '</samp><br/>');
		consoleEl.insertBefore(fragment, consoleEl.childNodes[0]);
	});
	socket.on('disconnect', (err) => {
		var fragment = createFragment('<samp>connection error or wrong password</samp><br/>');
		consoleEl.insertBefore(fragment, consoleEl.childNodes[0]);
	});
});