{{- template "base" . -}}

{{- define "additional-css" -}}
	<link rel="stylesheet" href="/static/game.css">
{{ end -}}

{{- define "additional-js" -}}
{{ end -}}

{{- define "header" }}
	<h1>{{ .P.Edges.Session.Edges.Game.Name }}</h1>
{{ end -}}

{{- define "main" }}
	<template id="name-template">
		<span class="name"></span>
	</template>
	<section id="names" data-my-name="{{ .P.Name }}" data-my-id="{{ .P.ID }}"></section>

	<template id="answer-template">
		<button class="answer"></button>
	</template>
	<template id="question-template">
		<h1 class="question"></h1>
		<div class="answers"></div>
	</template>
	<section id="question"></section>

	<section id="controls">
		<button class="next" data-session="{{ .P.Edges.Session.ID }}">Další otázka</button>
	</section>

	<script>
		const namesSection = document.getElementById('names');
		const nameTemplate = document.getElementById('name-template')

		const questionSection = document.getElementById('question');
		const questionTemplate = document.getElementById('question-template');
		const answerTemplate = document.getElementById('answer-template');

		const playerId = namesSection.dataset.myId;

		const socket = new WebSocket('ws://' + window.location.host + '/ws/' + encodeURIComponent(playerId));

		document.addEventListener("DOMContentLoaded", () => {
			const next = document.querySelector('#controls .next');
			next.addEventListener("click", () => {
				const url = window.location.pathname + '/rpc/next';
				fetch(url, {method: "POST"})
					.catch(() => {
						console.warn("Setting next question failed")
					});
			});
		});

		socket.addEventListener('message', (e) => {
			const data = JSON.parse(e.data);
			console.log(data); //TODO remove debug

			if ('players' in data && data.players !== null) {
				namesSection.innerHTML = '';
				for (const player of data.players) {
					const nameClone = nameTemplate.content.cloneNode(true);
					const name = nameClone.querySelector('.name');
					name.innerText = player.name;
					if (player.name === namesSection.dataset.myName) {
						if (player.organiser) {
							document.body.classList.add('organiser');
						} else {
							document.body.classList.remove('organiser');
						}
						name.classList.add('my-name');
					}
					if (player.organiser) {
						name.classList.add('organiser');
					}
					namesSection.appendChild(nameClone);
				}
			}

			if ('question' in data) {
				questionSection.innerHTML = '';
				if (data.question) {
					const questionClone = questionTemplate.content.cloneNode(true);
					questionClone.querySelector('.question').innerText = data.question.title;
					const answers = questionClone.querySelector('.answers');
					const organiser = document.body.classList.contains('organiser');
					for (const answer of data.question.answers) {
						const answerClone = answerTemplate.content.cloneNode(true);
						const button = answerClone.querySelector('.answer');
						button.innerText = answer.title;
						button.dataset.id = answer.id;
						if (organiser) {
							button.disabled = true;
						} else {
							button.addEventListener('click', (e) => {
								const id = e.target.dataset.id;
								const url = window.location.pathname + '/answers/' + encodeURIComponent(id);
								fetch(url, {method: 'POST'})
								.then(() => {
									e.target.classList.add('selected');
									for (const button of document.getElementsByClassName('answer')) {
										button.disabled = true;
									}
								})
								.catch((err) => console.error(err)) // TODO proper error handling
							});
						}
						answers.appendChild(answerClone);
					}
					questionSection.appendChild(questionClone);
				}
			}
		});
	</script>
{{ end -}}