/* ==========================================================================
    Easter egg hunt functionality
 ========================================================================== */
statusEastereggs = document.getElementsByClassName('statusbar-easteregg');
let easterHuntSecLabel;
let easterHuntMinLabel;
let easterCounterInterval = 0;
let currentEggs = [];
let easterHuntTotalSeconds;
let easterHuntTotalMinutes;
let easterHuntCompleted = false;

//Check if the hunt has started
//When hunt is started, start counter and fill the current egg status
function checkIfHuntStarted() {

    easterHuntSecLabel = document.getElementById('easterSecondsLabel');
    easterHuntMinLabel = document.getElementById('easterMinutesLabel');

    if (Cookie.get('easterHuntDate')) {
        document.getElementById('easter-menu__status').style.display = 'flex';
        document.getElementById('easter-menu__start').style.display = 'none';
        let eggsOnPage = document.getElementsByClassName('easteregg');
        //calculate current time difference
        const setTime = Cookie.get('easterHuntDate');
        const difTime = Date.now() - setTime;
        startEasterHuntTimer(difTime);

        //Set and fill easteregg status on load
        if (Cookie.get('easterHuntEggs')!==""){
            currentEggs = JSON.parse(Cookie.get('easterHuntEggs'));
        }

        for (let i = 0; i < currentEggs.length; i++) {
            statusEastereggs[i].children[0].children[1].setAttribute('class', 'statusbar-easteregg--filled');
        }

        //show eggs on page when they're not found yet

        if (eggsOnPage.length > 0){

            for (let x = 0; x < eggsOnPage.length; x++){
                if(!currentEggs.includes(eggsOnPage[x].id.replace('easteregg-', ''))){
                    eggsOnPage[x].style.display = "block";
                }
            }
        }


    }

    else {
        document.getElementById('easter-menu__start').style.display = 'flex';
    }

}

//Start live timer in minutes and seconds
function startEasterHuntTimer(currentEasterTime) {
    let easterSeconds = Math.floor(currentEasterTime / 1000);
        if(easterCounterInterval === 0){
            easterCounterInterval = setInterval(startUpcounter, 1000);
        }

    function startUpcounter(){
        if(!easterHuntCompleted){
            easterSeconds ++;
            easterHuntTotalSeconds = pad(easterSeconds % 60);
            easterHuntTotalMinutes = pad(parseInt(easterSeconds / 60));
            easterHuntSecLabel.innerHTML = easterHuntTotalSeconds;
            easterHuntMinLabel.innerHTML = easterHuntTotalMinutes;
        }

    }

    //Make sure there is always a double number like with '02'
    function pad(val) {
        let valString = val + "";
        if (valString.length < 2) {
            return "0" + valString;
        } else {
            return valString;
        }
    }
}

function startEasterHunt() {
    startDate = Date.now();
    Cookie.set('easterHuntEggs', "", 90);
    Cookie.set('easterHuntDate', startDate, 90);
    startEasterHuntTimer(0);
    document.getElementById('easter-menu__status').style.display = 'flex';
    document.getElementById('easter-menu__start').style.display = 'none';
    let eggsOnPage = document.getElementsByClassName('easteregg');
    //show eggs on page when they're not found yet

    if (eggsOnPage.length > 0){

        for (let x = 0; x < eggsOnPage.length; x++){
            if(!currentEggs.includes(eggsOnPage[x].id.replace('easteregg-', ''))){
                eggsOnPage[x].style.display = "block";
            }
        }
    }
}

//When clicked on easteregg if found Currenteggs counts up and saves to cookie
function findEasteregg(el) {
    if(currentEggs.length < statusEastereggs.length){
        el = el.id.replace('easteregg-', '');
        statusEastereggs[currentEggs.length].children[0].children[1].setAttribute('class', 'statusbar-easteregg--filled');
        currentEggs.push(el);
        console.log(currentEggs);
        Cookie.set('easterHuntEggs', JSON.stringify(currentEggs), 90);
        let textFrame = document.getElementById('easteregg-text__frame' + el);
        let foundEasteregg = document.getElementById('easteregg-' + el);

        foundEasteregg.classList.add('easteregg--found');
        textFrame.classList.add('easteregg-text__frame--visible');
        setTimeout(function() {

            foundEasteregg.style.display = 'none';
        }, 500);

        setTimeout(function() {
            textFrame.classList.remove('easteregg-text__frame--visible');
        }, 2000);
    }

    //Wanneer alle eitjes gevonden zijn
    if(currentEggs.length === statusEastereggs.length){
        easterHuntCompleted = true;
        alert('Pure winst!! Of toch liever melkchocolade?' +
            ' Je hebt er ' + easterHuntTotalMinutes + ' minuten en ' + easterHuntTotalSeconds + ' seconden over gedaan.');
    }
}

function closeEasterPopup(element){
    findAncestor(element, 'easter-popUp').style.display = 'none';
}

function showEasterModalStart() {
    document.getElementById('easter_popup--start').style.display = 'flex';
}

function showQuitPopup() {
    document.getElementById('easter_popup--quit').style.display = 'flex';
}

function quitEasterHunt() {
    Cookie.erase('easterHuntEggs');
    Cookie.erase('easterHuntDate');
    location.reload();
}

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}