const title = document.getElementById('title');

const start = document.getElementById('start');

const homepage = document.getElementById('homepage');
const questions = document.getElementById('questions');
const results = document.getElementById('results');

const openQuestions = document.getElementById('openQuestions');
const choices = document.getElementById('choices');

const partyList = document.getElementById('partyList');
const nextPage = document.getElementById('nextPage');

const question = document.getElementById('question');
const statement = document.getElementById('statement');

const backButton = document.getElementById('backButton');

const isImportant = document.getElementById('isImportant');

const pro = document.getElementById('pro');
const none = document.getElementById('none');
const contra = document.getElementById('contra');
const skip = document.getElementById('skip');
const arrowNext = document.getElementById('arrowNext');

const match = document.getElementById('match');

const largeParties = document.getElementById('largeParties');
const secularParties = document.getElementById('secularParties');
const noParties = document.getElementById('noParties');

const firstPartyElement = document.getElementById('firstPartyElement');
const secondPartyElement = document.getElementById('secondPartyElement');
const thirdPartyElement = document.getElementById('thirdPartyElement');

const otherResults = document.getElementById('otherResults');

let answers = [];
let counter = 0;
let choicesStep = false;

let choicesLoaded = false;

window.onload = function()
{
	startPage();
}

// This is the function that starts onload that makes the homepage visable.
function startPage()
{
	homepage.style.display = 'block';
	questions.style.display = 'none';
	results.style.display = 'none';

	backButton.style.display = 'none';

	document.getElementById('questionCount').innerHTML = subjects.length;

	start.addEventListener('click', startQuiz);

	addValues();
}

function addValues()
{
	// This for loop gives all the parties a count and a mark property with a default value.
	for (let i = 0; i < parties.length; i++) {
		let party = parties[i];
		party['count'] = 0;
		party['marked'] = false;
	}
}

// This function contains the question display and calls the 'setStatement()' function to place the chosen aswer.
function startQuiz()
{

	homepage.style.display = 'none';
	questions.style.display = 'block';
	results.style.display = 'none';

	backButton.style.display = 'block';

	openQuestions.style.display = 'block';
	choices.style.display = 'none';

	pro.addEventListener('click', setAnswer);
	none.addEventListener('click', setAnswer);
	contra.addEventListener('click', setAnswer);
	skip.addEventListener('click', setAnswer);

	backButton.addEventListener('click', goBack);

	setStatement();
}

// This function makes it possible to navigate back through the questions.
function goBack()
{
	// when the counter is 0 it means that there are no more questions to go back to so the homepage has to be shown.
	if (counter === 0) {
		// back to homepage
		startPage();

	// when the counter is the same number as there are subjects, it means that you wanna go back to the last question from the choices screen.
	} else if (counter === subjects.length){
		startQuiz();

		// if both conditions are not true, then the counter loses 1 so you go back just 1 question.
	} else {
		counter--;
		startQuiz();
	}
}

// This function checks the eventListner and the important checkbox.
// It adds the id of the pressed button (pro,none,contra or skip) and the 'checked' to the answers array.
function setAnswer(value)
{
	answers[counter] = {
		"position": value.target.id,
		"isImportant": isImportant.checked
	};

	counter++;
	setStatement();
}

// This function contains a if else to check by the counter which question needs to be displayed, if its the last one there will be linked to showChoices().
function setStatement()
{
	if (counter === subjects.length && choicesStep === false) {
		showChoices();

	} else if (counter === subjects.length && choicesStep === true)
	{
		counter = subjects.length;
		counter--;
		setStatement();
	} else if (counter < subjects.length) {

		question.innerHTML = counter + 1 + '. ' + subjects[counter].title;
		statement.innerHTML = subjects[counter].statement;

		choicesStep = false;
		checkStatement();
	}
}

// This function makes it possible to remember if a question is marked as important.
function checkStatement()
{
	if (answers[counter] == undefined) {
		isImportant.checked = false;
	} else {
		isImportant.checked = answers[counter].isImportant;
	}
}

// This function create a page where there has to be chosen a preference for at least 3 parties.
function showChoices()
{
	choicesStep = true;

	openQuestions.style.display = 'none';
	choices.style.display = 'block';

	backButton.addEventListener('click', goBack);

	question.innerHTML = 'Welke partijen wilt u meenemen in het resultaat?';
	statement.innerHTML = 'U kunt kiezen voor grote partijen, daarbij nemen we de partijen mee die in de peilingen op minimaal één zetel staan. U kunt kiezen voor seculiere partijen. Maak tenminste een selectie van drie partijen.';

	nextPage.addEventListener('click', result);

	createParties();

	largeParties.addEventListener('click', largePartiesSelection);
	secularParties.addEventListener('click', secularPartiesSelection);
	noParties.addEventListener('click', noPartiesSelection);
}

// This function creates the list of parties that are available, it also gives them checkboxes.
function createParties()
{
	if (!choicesLoaded) {

		for (let i = 0; i < parties.length; i++)
		{
			const currIndex = i;

			let createLi = document.createElement('li');
			createLi.className = "list-group-item";

			let checkbox = document.createElement('input');
			checkbox.setAttribute('type', 'checkbox');
			checkbox.setAttribute('id', parties[i].name);
			checkbox.onclick = function () {
				setParty(currIndex);
			};
			createLi.appendChild(checkbox);

			let liContent = document.createTextNode(parties[i].name);
			createLi.appendChild(liContent);

			partyList.appendChild(createLi);
		}
		choicesLoaded = true;
	}
}

// This function creates a selection of all parties with more then 1 seat.
function largePartiesSelection()
{
	for (let i = 0; i < parties.length; i++)
	{
		let party = parties[i];
		if (party.size >= 1)
		{
			party.marked = true;

			let partyName = party.name;
			document.getElementById(partyName).checked = true;
		}
	}
}

// This function creates a selection of all secular parties.
function secularPartiesSelection()
{
	for (let i = 0; i < parties.length; i++)
	{
		let partySecular = parties[i].secular;
		if (partySecular)
		{
			let party = parties[i];
			party.marked = true;

			let partyName = party.name;
			document.getElementById(partyName).checked = true;
		}
	}
}

// This function clears the selection.
function noPartiesSelection()
{
	for (let i = 0; i < parties.length; i++)
	{
		let party = parties[i];
		party['marked'] = false;

		let partyErase = parties[i].name;

		document.getElementById(partyErase).checked = false;
	}
}

// This function contains a check to see if the party is added to a array.
function setParty(index)
{
	if (parties[index].marked) {
		parties[index].marked = false;
	} else {
		parties[index].marked = true;
	}
}

// This function creates a page where the results are displayed.
function result()
{
	var markCounter = 0;
	for (let k = 0; k < parties.length; k++) {
		if (parties[k].marked){
			markCounter++;
		}
	}

	if (markCounter >= 3) {

		choicesStep = false;

		homepage.style.display = 'none';
		questions.style.display = 'none';
		results.style.display = 'block';

		backButton.addEventListener('click', goBack);

		checkAnswer();
		showResult();
	} else {
		alert('Selecteer ten minste 3 partijen.');
	}
}

// When the last answer is filled, this function looks at all the parties which answers are the same.
// When a answer is the same as the one of the party, the party gets +1 by the count unless the answer is set to important, then it gets +2.
function checkAnswer()
{
	// This for loop loops as many times as there are subjects. Every loop is one answer which will be checked individually.
	for (let i = 0; i < subjects.length; i++) {

		// Every position inside the answers array will be placed in answerPosition.
		// Each answer will be checked after each other because of the i value(the loop value).
		let answerPosition = answers[i].position;
		// If a answer contains a 'skip' value the loop will be stoped and the next loop will start.
		if (answerPosition === "skip" || answerPosition === "arrowNext") {

			// Continue means that the for loop will go to the next loop instead of break what stops the for loop instantly.
			continue;
		}

		// Every isImportant inside the answers array will be placed in answerIsImportant.
		// Each answer will be checked after each other because of the i value(the loop value).
		let answerIsImportant = answers[i].isImportant;

		// Every subject will be played individually inside the subject array be the value of i.
		let subject = subjects[i];


		// this loop makes it possible to take each party individually out of the subject array.
		for (let j = 0; j < subject.parties.length; j++) {

			// Every loop the party will be placed inside subjectParty for a better readability.
			let subjectParty = subject.parties[j];

			// Every loop the position of the party will be placed in subjectPartyPosition for a better readability.
			let subjectPartyPosition = subjectParty.position;

			// this condition checks if the position of the party that is being checked is the same as the filled answer.
			if (subjectPartyPosition === answerPosition) {

				// This loop checks all parties for a match. When there is a match it will look for the isImportant so the right value can be added.
				for (let k = 0; k < parties.length; k++) {

					let party = parties[k];

					// If the party.name(parties array) has the same value as subjectParty(subjects array) the count will add with the right value.
					if (party.name === subjectParty.name) {

							// If the answer is not important the count will be +1.
							if (!answerIsImportant) {
								party.count += 1;
							// If the answer is important the count will be +2.
							} else if (answerIsImportant) {
								party.count += 2;
							}

							// The break will make sure the loop will stop immediately so the next subjectParty can be checked.
							// This break will only work when the party.name and subjectParty.name are the same.
							break;
					}
				}
			}
		}

	}
}

// This function creates the result page
function showResult()
{
	// Step 1:
	// var checked = Array.from(document.querySelectorAll('.list-group-item > input[type="checkbox"]'))
	// 	.filter(function(checkbox) {
	// 		return checkbox.checked === false }
	// 	);

	// var filteredParties = parties.filter(function(party) {
	// 	return checked.find(function(checked) {
	// 		return checked.id === party.name
	// 	});
	// });

	// filteredParties.sort()




	// return;

	otherResults.innerHTML = '';

	let markedParties = [];
	// Go trough all of the parties.
	for (let i = 0; i < parties.length; i++) {

		var party = parties[i];
		// If a party is marked, we want to add it to markedParties.
		if (party.marked) {
			// markedParties[i] = party;
			markedParties.push(party);
		}

	}

	// This inside sort function makes sure all the data is sorted by the count from high to low value.
	markedParties.sort(function(a,b) {
		return b.count-a.count;
	});

	match.innerHTML = '1# '+ markedParties[0].name + ' with a score of ' + markedParties[0].count;

	// These are the first 3 value's from the array which means that these had the most similar answers.
	firstPartyElement.innerHTML = '1# '+ markedParties[0].name + '<p><b> with score: </b></p> ' + markedParties[0].count;
	secondPartyElement.innerHTML = '2# '+ markedParties[1].name + '<p><b> with score: </b></p> ' + markedParties[1].count;
	thirdPartyElement.innerHTML = '3# '+ markedParties[2].name + '<p><b> with score: </b></p> ' + markedParties[2].count;

	for (let i = 3; i < markedParties.length; i++)
	{
		let li = document.createElement('li');
		li.innerHTML = markedParties[i].name + '<p><b> with score: </b></p> ' + markedParties[i].count;

		// The li will be placed inside the ul (otherResults).
		otherResults.appendChild(li);
	}
}