const fireworks = true; // enable/disable fireworks
const scrollFireworks = true; // enable fireworks to scroll with page content
const particlesPerFirework = 50; // count of particles per firework

// array of color palettes for the fireworks
const colorPalettes = [
  ['#ff0000', '#ff7300', '#ff4500'], // red's
  ['#0040ff', '#5a9bff', '#b0d9ff'], // blue's
  ['#47ff00', '#8eff47', '#00ff7f'], // green's
  ['#ffd700', '#c0c0c0', '#ff6347'], // gold, silver, red
  ['#ff00ff', '#ff99ff', '#800080'], // magenta's
  ['#ffef00', '#ffff99', '#ffd700'], // yellow's
];

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

// function to check and control fireworks
function toggleFirework() {
  const fireworksContainer = document.querySelector('.fireworks');
  if (!fireworksContainer) 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 fireworks if video/trailer player is active or dashboard is visible
  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
    fireworksContainer.style.display = 'none'; // hide fireworks
    if (!msgPrinted) {
      console.log('Fireworks hidden');
      clearInterval(fireworksInterval);
      msgPrinted = true;
    }
  } else {
    fireworksContainer.style.display = 'block'; // show fireworks
    if (msgPrinted) {
      console.log('Fireworks visible');
      startFireworks();
      msgPrinted = false;
    }
  }
}

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

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



// Funktion, um einen Schweif zu erzeugen
function createRocketTrail(x, startY, endY) {
  const fireworkContainer = document.querySelector('.fireworks');
  const rocketTrail = document.createElement('div');
  rocketTrail.classList.add('rocket-trail');
  fireworkContainer.appendChild(rocketTrail);

  // Setze Position und Animation
  rocketTrail.style.setProperty('--trailX', `${x}px`);
  rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
  rocketTrail.style.setProperty('--trailEndY', `${endY}px`);

  // Entferne das Element nach der Animation
  setTimeout(() => {
    fireworkContainer.removeChild(rocketTrail);
  }, 2000); // Dauer der Animation
}


// Funktion für die Partikel-Explosion
function createExplosion(x, y) {
  const fireworkContainer = document.querySelector('.fireworks');

  // Wähle eine zufällige Farbkombination
  const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];

  for (let i = 0; i < particlesPerFirework; i++) {
    const particle = document.createElement('div');
    particle.classList.add('firework');

    const angle = Math.random() * 2 * Math.PI; // Zufällige Richtung
    const distance = Math.random() * 180 + 100; // Zufällige Distanz
    const xOffset = Math.cos(angle) * distance;
    const yOffset = Math.sin(angle) * distance;

    particle.style.left = `${x}px`;
    particle.style.top = `${y}px`;
    particle.style.setProperty('--x', `${xOffset}px`);
    particle.style.setProperty('--y', `${yOffset}px`);
    particle.style.background = chosenPalette[Math.floor(Math.random() * chosenPalette.length)];

    fireworkContainer.appendChild(particle);

    // Entferne Partikel nach der Animation
    setTimeout(() => particle.remove(), 3000);
  }
}

// Funktion für das Feuerwerk mit Schweif
function launchFirework() {
  const fireworkContainer = document.querySelector('.fireworks');
  if (!fireworkContainer) return;

  // Zufällige horizontale Position
  //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
  const x = Math.random() * window.innerWidth; // Beliebiger Wert auf der gesamten Breite

  // Schweif startet unten und endet auf einer zufälligen Höhe um die Mitte
  let startY, endY;
  if (scrollFireworks) {
    // Y-Position berücksichtigt das Scrollen
    startY = window.scrollY + window.innerHeight; // Unterkante des Fensters plus der Scroll-Offset
    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Bereich um die Mitte, aber auch mit Scrollen
  } else {
    startY = window.innerHeight; // Unterkante des Fensters
    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Bereich um die Mitte
  }
  //console.log(startY, endY);
  
  // Schweif erzeugen
  createRocketTrail(x, startY, endY);

  // Explosion erzeugen
  setTimeout(() => {
    createExplosion(x, endY); // Explosion an der Endhöhe
  }, 1000); // or 1200
}

// Startet die Feuerwerksroutine
function startFireworks() {
  fireworksInterval = setInterval(() => {
    const randomCount = Math.floor(Math.random() * 4) + 4;
    for (let i = 0; i < randomCount; i++) {
      launchFirework();
    }
  }, 1800);
}


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