// 1. Read Configuration
const config = window.SeasonalsPluginConfig?.Pride || {};

const enabled = config.EnablePride !== undefined ? config.EnablePride : true;
const elementCount = config.HeartCount || 20;
const heartSize = config.HeartSize || 1.5;
const colorHeader = config.ColorHeader !== undefined ? config.ColorHeader : true;

let msgPrinted = false;

// 2. Toggle Function
// Hides the effect when a video player, trailer (in full width mode), dashboard, or user menu is active.
function togglePride() {
  const container = document.querySelector('.pride-container');
  if (!container) 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');

  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
    container.style.display = 'none';
    if (!msgPrinted) {
      console.log('Pride hidden');
      msgPrinted = true;
    }
  } else {
    container.style.display = 'block';
    if (msgPrinted) {
      console.log('Pride visible');
      msgPrinted = false;
    }
  }
}

// 3. MutationObserver
// Watches the DOM for changes so the effect can auto-hide/show.
const observer = new MutationObserver(togglePride);
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

// 4. Element Creation
// Create and append your animated elements to the container.
function createElements() {
  const container = document.querySelector('.pride-container') || document.createElement('div');

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

  if (colorHeader) {
      const header = document.querySelector('.skinHeader');
      if (header) {
          header.classList.add('pride-header');
      }
  }

  const heartEmojis = ['❤️', '🧡', '💛', '💚', '💙', '💜'];

  for (let i = 0; i < elementCount; i++) {
    const el = document.createElement('div');
    el.className = 'pride-heart';
    
    el.innerText = heartEmojis[Math.floor(Math.random() * heartEmojis.length)];
    el.style.fontSize = `${heartSize}rem`;
    el.style.left = `${Math.random() * 100}vw`;
    el.style.animationDuration = `${5 + Math.random() * 5}s`;
    el.style.animationDelay = `${Math.random() * 5}s`;
    el.style.marginLeft = `${(Math.random() - 0.5) * 100}px`;

    container.appendChild(el);
  }
}

// 5. Initialization
function initializePride() {
  if (!enabled) return;
  createElements();
  togglePride();
}

initializePride();