export function initDropdowns(responsiveSmall, responsiveSmallX) {
  const dropdowns = document.querySelectorAll('.dropdown');

  function updateBodyOverflow(isOpen, dropdownElement = null) {
    const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile');
    if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) {
      document.body.classList.add('is-hidden');
    } else {
      document.body.classList.remove('is-hidden');
    }
  }

  dropdowns.forEach(dropdown => {
    const trigger = dropdown.querySelector('.dropdown__trigger');
    const content = dropdown.querySelector('.dropdown__content');

    if (!trigger) return;



    // Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share
    if (dropdown.querySelector('.modal--share') && content) {
      content.addEventListener('click', (e) => {
        e.stopPropagation();
      });
    }

    trigger.addEventListener('click', (e) => {
      e.stopPropagation();

      // Ferme les autres dropdowns ouverts
      dropdowns.forEach(other => {
        if (other !== dropdown) {
          other.classList.remove('is-open', 'dropdown--align-right');
          other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
          const otherContent = other.querySelector('.dropdown__content');
          if (otherContent) otherContent.style.transform = '';
        }
      });

      const isOpening = !dropdown.classList.contains('is-open');

      if (isOpening && !dropdown.closest('#bottom-bar')) {
        // Vérifie s'il y a la place à droite
        const content = dropdown.querySelector('.dropdown__content');
        const triggerRect = trigger.getBoundingClientRect();
        const contentWidth = content.offsetWidth || 300;
        const spaceRight = window.innerWidth - triggerRect.left;

        if (spaceRight < contentWidth) {
          dropdown.classList.add('dropdown--align-right');
        } else {
          dropdown.classList.remove('dropdown--align-right');
        }
      }

      // Toggle le dropdown actuel
      dropdown.classList.toggle('is-open');
      trigger.classList.toggle('is-selected');

      // Décalage horizontal pour #bottom-bar sur petit écran
      if (dropdown.closest('#bottom-bar') && window.innerWidth < responsiveSmallX) {
        if (dropdown.classList.contains('is-open')) {
          requestAnimationFrame(() => {
            const rect = content.getBoundingClientRect();
            const paddingBody = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--padding-body')) || 0;
            content.style.transform = `translateX(${-rect.left + paddingBody}px)`;
          });
        } else {
          content.style.transform = '';
        }
      }

      // Gère l'overflow du body sur mobile
      updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
    });
  });

  // Ferme tous les dropdowns au clic extérieur
  document.addEventListener('click', (e) => {
    dropdowns.forEach(dropdown => {
      // Ne ferme pas si le clic est dans un dropdown contenant .modal--share
      if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) {
        return;
      }
      dropdown.classList.remove('is-open', 'dropdown--align-right');
      dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
      const c = dropdown.querySelector('.dropdown__content');
      if (c) c.style.transform = '';
    });
    updateBodyOverflow(false);
  });

  // Ferme au press Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      dropdowns.forEach(dropdown => {
        dropdown.classList.remove('is-open', 'dropdown--align-right');
        dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
        const c = dropdown.querySelector('.dropdown__content');
        if (c) c.style.transform = '';
      });
      updateBodyOverflow(false);
    }
  });
}