const defaultState = {
	style: 'FSCzech',
	id: null,
	title: null,
	questions: [],
	success: 0,
	submitTimer: 0,
	submitInterval: null,
	totalTimer: 0,
	totalInterval: null,
}

var state = defaultState

function clearState() {

	state = JSON.parse(JSON.stringify(defaultState))

}


function changeView(view) {

	for (el of document.querySelectorAll('.view'))
		el.style.display = 'none'

	document.getElementById(view).style.display = 'block'

}


function showLink() {

	var link = location.origin + '/?id=' + state.id

	var linkEl = document.getElementById('shareLink')
	linkEl.href = link
	linkEl.innerHTML = link

	document.querySelector('#sharing input').style.display = 'none'

}


function removeLink() {

	var linkEl = document.getElementById('shareLink')
	linkEl.href = ''
	linkEl.innerHTML = ''

	document.querySelector('#sharing input').style.display = 'inline-block'

}


async function shareQuiz() {

	if (state.id) {
		console.log('Showing saved local link')
		showLink()
		return
	}

	console.log('Saving quiz to server. QuizData:')

	var quizData = {
		title: state.title,
		questions: state.questions
	}

	console.log(quizData)
	console.log('Waiting for id')

	var db = location.origin + '/db'

	var response = await fetch(db, {
		method: 'POST',
		headers: {'Content-Type': 'text/plain'},
		body: JSON.stringify(quizData)
	})

	if (response.ok == false) {
		alert('Something went wrong while sharing')
		return
	}

	var responseBody = await response.text()
	console.log('Received id: ' + responseBody)
	state.id = responseBody

	showLink()

}


function updateTotalTimer() {

	var timerEls = document.querySelectorAll('.totaltimer')

	var minutes = Math.floor(state.totalTimer / 60)
	var seconds = state.totalTimer % 60

	var text = minutes + ':' + ('0' + seconds).slice(-2)

	for (timerEl of timerEls)
		timerEl.innerHTML = text

	state.totalTimer++

	localStorage.setItem('state', JSON.stringify(state))

}


function startTotalTimer() {

	console.log('Setting totalTimer to ' + state.totalTimer + ' seconds.')

	updateTotalTimer()

	state.totalInterval = setInterval(updateTotalTimer, 1000)

}


function updateSubmitTimer() {

	var button = document.getElementById('quizSubmitButton')

	if (state.submitTimer > 0) {

		button.value = 'Wait ' + state.submitTimer + 's'
		button.disabled = true
		state.submitTimer -= 1

	} else {

		button.value = 'Submit Answers'
		button.disabled = false
		clearInterval(state.submitInterval)

	}

}


function startSubmitTimer(time) {

	state.submitTimer = time || 30

	console.log('Setting submitTimer to ' + state.submitTimer + ' seconds.')

	updateSubmitTimer()

	state.submitInterval = setInterval(updateSubmitTimer, 1000)

}


function parseLine(line) {

	// replace newline markers with html newlines
	var els = line.replace(/⎊/g, '<br>').split('\t')

	var q = {}

	if (els[0] != '') {
		if (	els[0] == 'ChooseOne' ||
				els[0] == 'ChooseAny' ||
				els[0] == 'Text') {
			q.type = els[0]
		} else {
			alert('Invalid type given on one line')
			return null
		}
	} else {
		alert('No type given on one line')
		return null
	}

	if (els[1]) {
		q.question = els[1]
	} else {
		alert('No question given on one line')
		return null
	}

	// Split choices into array
	// Choices for text questions are labels
	// No choices (empty string) are okay for text questions
	// Also filter out empty lines because some people can't use spreadsheets
	if (els[2] || (q.type == 'Text' && els[2] == '')) {
		q.choices = els[2].split('<br>').filter(el => el != "")
	} else {
		alert('No choices given at question "'
			+ q.question + '"')
		return null
	}

	// If multiple answers are allowed, they are newline-separated
	// Also filter out empty lines because some people can't use spreadsheets
	if (els[3] && els[3] != '') {
		q.answers = els[3].split('<br>').filter(el => el != "")
	} else {
		alert('No answers given at question "'
			+ q.question + '"')
		return null
	}

	// Optional parameters
	q.explanation	= els[4] || '[No explanation provided]'
	q.author		= els[5] || '[No author provided]'
	q.picture		= els[6] || null

	return q

}


function parseSpreadsheet() {

	console.log('Parsing spreadsheet data')

	var textEl = document.getElementById('questions')

	/* MAGIC:
	 *	1. Find quoted multiline cells (<tab>"a<newline>b"<tab>)
	 *	2. Replace all newlines inside with a special char so the cell won't be
	 *		split later (<tab>"a<specialchar>b"<tab>)
	 *	3. Replace escaped quotes ("a ""b"" c") with single ones ("a "b" c")
	 *	4. Remove the outer quotes and tabs (a<specialchar>b)
	 *	5. Replace all tabs inside with spaces
	 *	6. Re-add outer tabs (<tab>a<specialchar>b<tab>)
	 */

	var text = textEl.value.replace(/\t"([^"\n]|"")+\n([^"]|"")*"/g,
		m => m.replace(/\n/g, '⎊')
			  .replace(/""/g, '"')
			  .replace(/^\t"(.*)"$/, '$1')
			  .replace(/\t/g, ' ')
			  .replace(/^(.*)$/g, '\t$1')
	)

	state.questions = text.split('\n').map(parseLine)

	if (state.questions.some(el => el == null)) {
		alert('Erroneous data. Please check and re-enter.')
		return {success: false}
	}

	localStorage.setItem('state', JSON.stringify(state))

	return {success: true}

}


function renderQuiz() {

	var quizForm = document.querySelector('#quiz form')

	quizForm.innerHTML = ''

	for (const [i, q] of state.questions.entries()) {

		var html = ''

		html += `<h3>Question #${i+1}</h3>`
		html += `<h4>${q.question}</h4>`

		if (q.picture)
			html += `<img src="${q.picture}">`

		if (q.type == 'ChooseOne' || q.type == 'ChooseAny') {

			var choices = Array.from(q.choices.entries())
			var shuffled = choices.sort(() => Math.random() - 0.5)

			for ([ci, c] of shuffled)
				html += (q.type == 'ChooseOne')
					? `<label><input type="radio" name="q${i}" value="${ci+1}"> <p>${c}</p></label><br>`
					: `<label><input type="checkbox" name="q${i}" value="${ci+1}"> <p>${c}</p></label><br>`

		} else if (q.type == 'Text') {

			// If choices were given, use them as labels, otherwise use generic label
			for ([ai, a] of q.answers.entries())
				html += `<label>${q.choices[ai] ? q.choices[ai] : 'Answer'}<input type="text" name="q${i}"></label>`

		}


		quizForm.innerHTML += html

	}

}


function startQuiz() {

	state.success = false

	console.log('Starting/Resuming quiz. State:')
	console.log(state)

	renderQuiz()

	changeView('quiz')

	if (state.submitTimer > 0)
		startSubmitTimer(state.submitTimer)
	else
		updateSubmitTimer()

	startTotalTimer()

	console.log('Quiz started/resumed')

}

function reStartQuiz() {

	console.log('Restarting quiz');

	state.totalTimer = 0
	state.submitTimer = 0
	state.success = 0

	startQuiz()

}


function updateTitles() {
	document.querySelector('#prescreen h1').innerHTML = state.title || ''
	document.querySelector('#quiz h1').innerHTML = state.title || ''
}

function createQuiz() {

	console.log('Creating new quiz')

	state.title = document.getElementById('titleField').value
	if (state.title == '') {
		alert('Please enter a title')
		return
	}

	clearState()
	removeLink()

	if (parseSpreadsheet().success == false) {
		console.log('Quiz creation failed.')
		return
	}

	console.log('Spreadsheet parsing successful')

	updateTitles()

	changeView('prescreen')

	console.log('Quiz created')

}


function endQuiz() {

	console.log('Ending quiz')

	localStorage.removeItem('state')

	document.querySelector('#quiz form').innerHTML = ''
	changeView('postscreen')

	if (state.submitInterval)
		clearInterval(state.submitInterval)

	clearInterval(state.totalInterval)

	console.log('Quiz ended')

}


function mergeKeyReducer(acc, entry) {

	if (!acc[entry[0]])
		acc[entry[0]] = []

	acc[entry[0]].push(entry[1])

	return acc

}


function submitQuiz() {

	console.log('Submitting quiz. State:')
	console.log(state)

	var quizForm = document.querySelector('#quiz form')

	var data = new FormData(quizForm)

	var responses = Array.from(data.entries()).reduce(mergeKeyReducer, {})

	console.log(responses)

	var correct = 0

	for (var [key, value] of Object.entries(responses)) {

		console.log(key + ": " + value)

		// "q3" -> 3
		var idx = key.slice(1)

		if (state.questions[idx].type == 'ChooseOne' || state.questions[idx].type == 'ChooseAny') {
			state.questions[idx].answers.sort()
			value.sort()
		}

		var correctAnswer = JSON.stringify(state.questions[idx].answers)
		var givenAnswer = JSON.stringify(value)

		console.log('Comparing: ' + givenAnswer + ' == ' + correctAnswer + '?: ' + (givenAnswer == correctAnswer))

		if (givenAnswer == correctAnswer)
			correct++

	}

	var text = '' + correct + '/' + state.questions.length + ' questions answered correctly.\n'

	state.success = (correct == state.questions.length)

	text += state.success ? 'Yay you did it!' : 'Try again!'

	if (!state.success) {
		renderQuiz()
		startSubmitTimer()
		alert(text)
	}

	if (state.success) {
		document.querySelector('#postscreen h1').innerHTML = `Yay, we're done!<br>Everything is correct :)`
		endQuiz()
	}

	console.log('Quiz submitted')

}


function abortQuiz() {

	console.log('Aborting quiz')

	if (!confirm('You sure you want to abort this quiz? Your progress will be lost.'))
		return

	document.querySelector('#postscreen h1').innerHTML = `Quiz cancelled.`

	endQuiz()

	console.log('Quiz cancelled')

}

function idFromUrl() {

	var s = window.location.search.split('id=')

	if (s.length <= 1)
		return null

	return s[1].split('&')[0]

}

async function fetchQuiz(id) {

	console.log('Fetching quiz')

	var url = location.origin + '/db/' + id

	var response = await fetch(url)

	if (response.ok == false) {
		alert('Something went wrong while loading this quiz')
		return
	}

	var json = await response.json()

	console.log('Quiz fetched. Response:')
	console.log(json)

	return json

}

const memes = [
	'GE-SUND-BRUN-NEN-CENTER!',
	'Deine Mudda! Berlin!',
	'Eine Runde Kicker?',
	'Hulkdrian!',
	'Jetz\' bin i\' wieda doa',
	'Mmmmh Carbonstaub',
	'#würthshausfranz',
	'#berlinerluft',
	'FaST<b>TUBe</b>, not Fast<b>COCUE</b>',
	'Yes, we CAN',
	'Ist in der Cloud.',
	'Ist im Wiki.',
	'Ich liiebe Teamcenter <3',
	'Podio kann alles!',
	'Let\'s build 3 fucking racecars!',
	'Der Fahrstuhl ist kaputt',
	'Frau Ipta reißt euch den Kopf ab!',
	'Max, Max, Max, Max, Max, Max, MaxMax!',
	'Julian, Anwärter, Firewall',
	'Diese Webseite ist geerdet.',
	'Wer AMS sagt muss auch BMS sagen',
	'Ist der Kabelbinder in der BOM?',
	'*Fistbump*',
	'Nividia!',
	'Ihr schafft das! :)',
	'Klotzen, nicht kleckern!',
	'*revving noises*',
	'Resistance is futile',
	'Jan schweißt das noch',
	'Would Claude approve of this?',
	'Im CAD hat\'s noch gepasst',
	'¯\\_(ツ)_/¯',
	'AMK Brudi',
	'Mmmhh cones',
]

window.onload = async function() {

	console.log('onload')

	var browserWarning = document.getElementById('browserwarning')

	browserWarning.style.display = (() => 'none')()

	var stateString = localStorage.getItem('state')

	var urlId = idFromUrl()
	console.log('URL ID:' + urlId)

	if (stateString) {

		console.log('Loading local state')
		state = JSON.parse(stateString)

	}

	// only fetch if it's a different one
	var useUrl = (urlId && urlId != state.id)
	if (useUrl) {

		console.log('Using remote quiz from url')

		quiz = await fetchQuiz(urlId)
		state.title = quiz.title
		state.questions = quiz.questions
		state.id = urlId

		changeView('prescreen')

	}

	updateTitles()
	document.getElementById('meme').innerHTML = memes[Math.floor(Math.random()*memes.length)]

	if (stateString && !useUrl)
		startQuiz()

	if (!stateString && !useUrl)
		changeView('spreadsheet')

	console.log('onload complete')

}