/* Här kan du ändra i variabler för att skapa ett quiz med flera svarsalternativ */

var quizName = "Gissa avsändaren";
var introText = "Lista ut vilken part som står bakom följande meningar från läromedelen. Arbetsgivarorganisationen Svenskt Näringsliv eller fackfinansierade Arena Skolinformation.";
var firstRobotText = "Klicka på knappen nedan för att starta.";
var firstButtonText = "Starta quizet";
var startaOm = "Gör om quizet";
var fortsätt = "Fortsätt";

/*
Du kan välja om du vill ha någonting i explainer och rubrik
Du kan ha hur många frågor du vill i alternativ
*/

var questions = [
    {
        fraga: "Arbetsköpare: Ägar­na, ledningen, mellan­chefer.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Skyddsombudet – en viktig person på arbetsplatsen?",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },

    {
        fraga: "Enkla jobb behövs!",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Svenskt Näringsliv",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "En arbetsplats utan kollektivavtal kan ha sämre löner och sämre villkor än andra arbetsplatser.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "På grund av inkomstskatt och arbetsgivaravgift betalar arbetsgivaren dock betydligt mer än du får ut i lönekuvertet.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Svenskt Näringsliv",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "För de anställda betyder (kollektiv)avtalet att de satt ett pris på sitt arbete. Under det priset får inte arbetsgivaren gå.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "De flesta i Sverige är överens om att det är svårt att höja skatterna i vårt land ytterligare.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Svenskt Näringsliv",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Många menar att alla tjänar på kollektivavtalen.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Arbetsgivaren behöver inte säga varför anställningen bara är för en viss tid.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Genom att öppna upp delar av välfärdssektorn för konkurrens skapas också möjligheter till företagande.I högre utsträckning än i andra branscher är det kvinnor som blivit företagare inom välfärdssektorn.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Svenskt Näringsliv",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Andra tycker att en skillnad kan vara rimlig men att den ibland är på tok för stor. Till exempel när en läkare tjänar flera gånger mer än en undersköterska gör.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Alla som går i skolan eller arbetar har rätt till en bra arbetsmiljö. Det är skolorna och arbetsgivarna skyldiga att se till.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Om nästan all vinst går till skatt kommer ingen att vara beredd att ta risker.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Svenskt Näringsliv",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Det finns många olika fackförbund i Sverige. Alla vill hjälpa medlemmarna med det som arbetstagarna tycker är viktigt på jobbet.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "När vinstintresset försvann, försvann också drivkrafterna bakom företagandet och utvecklingen stagnerade. (Om Sovjetunionen)",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Svenskt Näringsliv",
        explainer: "",
        meddelande: false,
    },
    {
        fraga: "Ett kollektivavtal är värt mycket för den som är anställd.",
        alternativ: ["Svenskt Näringsliv", "Arena skolinformation"],
        rattSvar: "Arena skolinformation",
        explainer: "",
        meddelande: false,
    },
];

var resultatSvar = {
    allaRatt: "Bra jobbat. Du fick alla rätt",
    nastanAllaRatt: "Bra jobbat. Du fick nästan alla rätt.",
    overHalftenRatt: "Helt okej. Du fick mer än hälften rätt.",
    halftenRatt: "Du svarade rätt på hälften av frågorna.",
    mindreAnHalftenRatt: "Du svarade rätt på färre än hälften av frågorna.",
    nastanAllaFel: "Det här gick ju inte så bra. Du svarade fel på nästan alla frågor.",
    allaFel: "Det här gick inte alls bra. Du svarade fel på alla frågor"
};



var bildTillPratbubbla = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/arbetet_logga.png";
var robotBild = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/robot2.png";

/* Här börjar testkoden. Ändra inget här */

var totalPoints = 0;
var testIndex = 0;
var fragaNr = 1;
var totalQuestionNumber = questions.reduce(function(total, currentValue) {
    if (!currentValue.meddelande) {
        console.log(total)
        return total + 1;
    } else {
        return total
    }
}, 0);


var root = document.body;

function getDocumentHeight() {
    return Math.max(
        html.offsetHeight,
    );
}

var hem = {
    oncreate: function() {
        console.log(body.scrollHeight)
        console.log(body.offsetHeight)
        console.log(html.clientHeight)
        console.log(html.scrollHeight)
        informHeight();
    },
    view: function() {
        return m("div.container", [
            m("div.Label", quizName),
            m("p.textBlock.u-textMetaDeca.u-spacingTopM", introText),
            messageBox(firstRobotText),
            m("button.Button.u-spacingTopM",
            {onclick: function() {
                m.mount(root, test);
            }}, firstButtonText)
        ]);
    }
};

var test = {
    onupdate: function() {
        informHeight();
    },

    view: function() {
        return m("div.container", [
            m("div.Label", quizName),
            questions[testIndex].meddelande? m("p.u-textMeta.u-spacingTopM", "Fråga " + (fragaNr - 1) + " av " + totalQuestionNumber) : m("p.u-textMeta.u-spacingTopM", "Fråga " + fragaNr + " av " + totalQuestionNumber),
            m("p.questionBox.u-spacingTopM..u-spacingBottomM.u-textMetaDeca", questions[testIndex].fraga),
            questions[testIndex].explainer ? messageBox(questions[testIndex].explainer) : null,
            m("div.buttondiv.u-spacingTopM", shuffle(questions[testIndex].alternativ).map(function(fraga, index) {
                return m("button.Button.answerButton.u-spacingBottomS.u-spacingRightS", {
                    id: "question-" + index,
                    onclick: function(e) {
                        if (questions[testIndex].meddelande) {
                            console.log("meddelande");
                            testIndex += 1;
                            if (testIndex == questions.length) {
                                        m.mount(root, done);
                                    }
                        } else {
                            questions[testIndex].userAnswer = fraga;
                            if (questions[testIndex].rattSvar == fraga) {
                                totalPoints += 1;
                                setTimeout(function(){
                                    testIndex += 1;
                                    fragaNr += 1;
                                    for (var i = 0; i < buttons.length; i++) {
                                        buttons[i].disabled = false;
                                        buttons[i].classList.remove("answerTrue")
                                        buttons[i].classList.remove("answerFalse")
                                    }
                                    if (testIndex == questions.length) {
                                        m.mount(root, done);
                                    }
                                    m.redraw();
                                }, 600);
                            } else {
                                e.target.classList.add("answerFalse")
                                e.target.classList.add("shake")
                                setTimeout(function(){
                                    testIndex += 1;
                                    fragaNr += 1;
                                    for (var i = 0; i < buttons.length; i++) {
                                        buttons[i].disabled = false;
                                        buttons[i].classList.remove("answerTrue")
                                        buttons[i].classList.remove("answerFalse")
                                    }
                                    if (testIndex == questions.length) {
                                        m.mount(root, done);
                                    }
                                    m.redraw();
                                }, 1000);
                            }

                            let buttons = document.getElementsByClassName("answerButton");
                            for (var i = 0; i < buttons.length; i++) {
                                buttons[i].disabled = true;
                                if (buttons[i].textContent == questions[testIndex].rattSvar) {
                                    buttons[i].classList.add("answerTrue")
                                }
                            }
                            e.redraw = false;
                        }
                    }
                }, fraga
                )}))
            ])
    }
};

var done = {
    oncreate: function() {
        informHeight();
    },
    onupdate: function() {
        informHeight();
    },
    view: function() {
        var resultString = "Du fick " + totalPoints + " rätt av " + totalQuestionNumber + " möjliga.";
        var lastRobotMessage;
        if (totalQuestionNumber == totalPoints) {
            lastRobotMessage = resultatSvar.allaRatt;
        } else if (totalPoints > totalQuestionNumber * 0.7) {
            lastRobotMessage = resultatSvar.nastanAllaRatt;
        } else if (totalPoints > totalQuestionNumber * 0.5) {
            lastRobotMessage = resultatSvar.overHalftenRatt;
        } else if (totalPoints == totalQuestionNumber * 0.5) {
            lastRobotMessage = resultatSvar.halftenRatt;
        } else if (totalPoints > totalQuestionNumber * 0.3) {
            lastRobotMessage = resultatSvar.mindreAnHalftenRatt;
        } else if (totalPoints > 0) {
            lastRobotMessage = resultatSvar.nastanAllaFel;
        } else {
            lastRobotMessage = resultatSvar.allaFel;
        }
        return m("div.container", [
            m("div.Label", quizName),
            m("div", [
                m("p.questionBox.u-spacingTopM.u-textMetaDeca", resultString),
                messageBox(lastRobotMessage),
                m("div.buttondiv",
                m("button.Button.u-spacingTopM.u-spacingRightS", {
                    onclick: function() {
                        testIndex = 0;
                        totalPoints = 0;
                        fragaNr = 1;
                        m.mount(root, hem);
                    }
                }, startaOm
            )),
            m("h1.u-textMetaDeca.u-spacingTopM.u-spacingBottomS", "Detaljerat resultat:"),
            m("div", questions.filter(question => !question.meddelande).map(function(question, index){

                return m("div.answerDiv.u-spacingBottomM", [
                    m("p.u-textMeta.u-textStrong", (index + 1) + ". " + question.fraga),
                    m(question.rattSvar == question.userAnswer ? "p.u-textMeta.u-colorFgComplementary-1" : "p.u-textMeta.u-colorFgPrimary", question.rattSvar == question.userAnswer ? "Ditt svar var rätt!" : "Ditt svar var fel."),
                    m("p.u-textMeta", "Rätt svar är \”" + question.rattSvar + "\”. Du svarade \”" + question.userAnswer + "\”."),
                ])
            }))
        ])]);
    }
};

function messageBox(message) {
    return m("div.messageBox.u-spacingTopXL", [
        m("img.messageImg", {src: bildTillPratbubbla}),
        m("div.bubbledLeft.u-textMeta", message)
    ]);
}

function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
    }
    return array;
}

m.mount(root, hem);