const leaves = true; // enable/disable leaves
const randomLeaves = true; // enable random leaves
const randomLeavesMobile = false; // enable random leaves on mobile devices
const leafCount = 25; // count of random extra leaves


let msgPrinted = false; // flag to prevent multiple console messages

// function to check and control the leaves
function toggleAutumn() {
  const autumnContainer = document.querySelector('.autumn-container');
  if (!autumnContainer) 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 leaves if video/trailer player is active or dashboard is visible
  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
    autumnContainer.style.display = 'none'; // hide leaves
    if (!msgPrinted) {
      console.log('Autumn hidden');
      msgPrinted = true;
    }
  } else {
    autumnContainer.style.display = 'block'; // show leaves
    if (msgPrinted) {
      console.log('Autumn visible');
      msgPrinted = false;
    }
  }
}

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

// 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 = [
    "/web/seasonal/ghost_20x20.png",
    "/web/seasonal/bat_20x20.png",
    "/web/seasonal/pumpkin_20x20.png",
];*/
const images = [
  "./images/ghost_20x20.png",
  "./images/bat_20x20.png",
  "./images/pumpkin_20x20.png",
];


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

  console.log('Adding random leaves');

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

    // pick a random leave symbol
    if (enableColoredSnowflakes) {
      leave.textContent = autumnSymbolsMobile[Math.floor(Math.random() * autumnSymbolsMobile.length)];
    } else {
      leave.textContent = autumnSymbols[Math.floor(Math.random() * autumnSymbols.length)];
    }

    // set random horizontal position, animation delay and size(uncomment lines to enable) 
    const randomLeft = Math.random() * 100; // position (0% to 100%)
    //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
    const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)

    // apply styles
    leave.style.left = `${randomLeft}%`;
    //leave.style.fontSize = `${randomSize}em`; //uncomment to enable random size
    leave.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;

    // add the leave to the container
    autumnContainer.appendChild(leave);
  }
  console.log('Random leaves added');
}

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

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

  for (let i = 0; i < 1; i++) {
    images.forEach(imageSrc => {
      const leafDiv = document.createElement("div");
      leafDiv.className = "leaf";

      const img = document.createElement("img");
      img.src = imageSrc;

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

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

  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
  if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
    addRandomSnowflakes(snowflakeCount);
  }
});