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);
    }
}