const easter = true; // enable/disable easter
const randomEaster = true; // enable random easter
const randomEasterMobile = false; // enable random easter on mobile devices
const enableDiffrentDuration = true; // enable different duration for the random easter
const easterEggCount = 20; // count of random extra easter

const bunny = true; // enable/disable hopping bunny
const step = 5; // step size of the bunny
const hopHeight = 30; // height of the bunny hop


let msgPrinted = false; // flag to prevent multiple console messages
let position = -100; // start position of the bunny
const screenWidth = window.innerWidth;

// function to check and control the easter
function toggleEaster() {
    const easterContainer = document.querySelector('.easter-container');
    if (!easterContainer) return;

    const videoPlayer = document.querySelector('.videoPlayerContainer');
    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
    const isDashboard = document.body.classList.contains('dashboardDocument');
    const hasUserMenu = document.querySelector('#app-user-menu');

    // hide easter if video/trailer player is active or dashboard is visible
    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
        easterContainer.style.display = 'none'; // hide easter
        if (!msgPrinted) {
            console.log('Easter hidden');
            msgPrinted = true;
        }
    } else {
        easterContainer.style.display = 'block'; // show easter
        if (msgPrinted) {
            console.log('Easter visible');
            msgPrinted = false;
        }
    }
}

// observe changes in the DOM
const observer = new MutationObserver(toggleEaster);

// start observation
observer.observe(document.body, {
    childList: true,    // observe adding/removing of child elements
    subtree: true,      // observe all levels of the DOM tree
    attributes: true    // observe changes to attributes (e.g. class changes)
});

/*
const images = [
    "./seasonals/easter_images/egg_1.png",
    "./seasonals/easter_images/egg_2.png",
    "./seasonals/easter_images/egg_3.png",
    "./seasonals/easter_images/egg_4.png",
    "./seasonals/easter_images/egg_5.png",
    "./seasonals/easter_images/egg_6.png",
    "./seasonals/easter_images/egg_7.png",
    "./seasonals/easter_images/egg_8.png",
    "./seasonals/easter_images/egg_9.png",
    "./seasonals/easter_images/egg_10.png",
    "./seasonals/easter_images/egg_11.png",
    "./seasonals/easter_images/egg_12.png",
];
const  rabbit = "./seasonals/easter_images/easter-bunny.png";
*/
// remove commented out image array to enable test site working, comment out above images array for that

let images = [
    "./images/egg_1.png",
    "./images/egg_2.png",
    "./images/egg_3.png",
    "./images/egg_4.png",
    "./images/egg_5.png",
    "./images/egg_6.png",
    "./images/egg_7.png",
    "./images/egg_8.png",
    "./images/egg_9.png",
    "./images/egg_10.png",
    "./images/egg_11.png",
    "./images/egg_12.png",
];
const rabbit = "./images/easter-bunny.png";


function addRandomEaster(count) {
    const easterContainer = document.querySelector('.easter-container'); // get the leave container
    if (!easterContainer) return; // exit if leave container is not found

    console.log('Adding random easter eggs');

    // Array of leave characters
    for (let i = 0; i < count; i++) {
        // create a new leave element
        const eggDiv = document.createElement('div');
        eggDiv.className = "easter";

        // pick a random easter symbol
        const imageSrc = images[Math.floor(Math.random() * images.length)];
        const img = document.createElement("img");
        img.src = imageSrc;

        eggDiv.appendChild(img);

        // set random horizontal position, animation delay and size(uncomment lines to enable) 
        const randomLeft = Math.random() * 100; // position (0% to 100%)
        const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s)
        const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)

        // apply styles
        eggDiv.style.left = `${randomLeft}%`;
        eggDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;

        // set random animation duration
        if (enableDiffrentDuration) {
            const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
            const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
            eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
        }


        // add the leave to the container
        easterContainer.appendChild(eggDiv);
    }
    console.log('Random easter added');
}

function addHoppingRabbit() {
    if (!bunny) return; // only add the bunny if bunny is enabled

    const easterContainer = document.querySelector('.easter-container'); // get the leave container
    if (!easterContainer) return; // exit if leave container is not found

    // create the rabbit image
    const rabbitDiv = document.createElement('div');
    rabbitDiv.id = "rabbit-wrapper";
    
    const bunnyImg = document.createElement("img");
    bunnyImg.src = rabbit;
    bunnyImg.id = "rabbit";
    
    rabbitDiv.appendChild(bunnyImg);
    

    // function to animate the rabbit
    function hop() {
        position += step;

        // Horizontal bewegen und "Hüpfen" animieren
        rabbitDiv.style.left = position + "px";
        rabbitDiv.style.transform = `translateY(${Math.sin(position / 50) * -hopHeight}px)`;

        // Wenn der Hase den rechten Rand verlässt, zurück auf die linke Seite setzen
        if (position > screenWidth) {
            position = -rabbitImg.offsetWidth;
        }

        requestAnimationFrame(hop);
    }

    // Start der Animation
    rabbitDiv.style.left = position + "px";
    
    easterContainer.appendChild(rabbitDiv);
    hop();
}

// initialize standard easter
function initEaster() {
    const container = document.querySelector('.easter-container') || document.createElement("div");

    if (!document.querySelector('.easter-container')) {
        container.className = "easter-container";
        container.setAttribute("aria-hidden", "true");
        document.body.appendChild(container);
    }

    // shuffle the easter images
    let currentIndex = images.length;
    let randomIndex;
    while (currentIndex != 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        [images[currentIndex], images[randomIndex]] = [images[randomIndex], images[currentIndex]];
    }

    for (let i = 0; i < 12; i++) {
        const eggDiv = document.createElement("div");
        eggDiv.className = "easter";

        const img = document.createElement("img");
        img.src = images[i];

        // set random animation duration
        if (enableDiffrentDuration) {
            const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
            const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
            eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
        }

        eggDiv.appendChild(img);
        container.appendChild(eggDiv);
    }

    addHoppingRabbit();
}


// initialize easter and add random easter after the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    if (!easter) return; // exit if easter are disabled
    initEaster();
    toggleEaster();

    if (randomEaster && (screenWidth > 768 || randomEasterMobile)) { // add random easter only on larger screens, unless enabled for mobile devices
        addRandomEaster(easterEggCount);
    }
});