document.addEventListener('DOMContentLoaded', function () {

  // Script pour le deuxième ensemble de tabs (tab-module)
  const tabModuleWrapper = document.querySelector('.tab-module-wrapper');
  const tabModuleLinks = document.querySelectorAll('.tab-module-link');
  const tabModulePanes = document.querySelectorAll('.tab-module-pane');

  function updateTabModule(currentTab) {
    tabModuleWrapper.setAttribute('data-tab-module-current', currentTab);

    tabModuleLinks.forEach(link => {
      if (link.getAttribute('data-tab-module') === currentTab) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });

    tabModulePanes.forEach(pane => {
      if (pane.getAttribute('data-tab-module') === currentTab) {
        pane.classList.add('active');
      } else {
        pane.classList.remove('active');
      }
    });
  }

  tabModuleLinks.forEach(link => {
    link.addEventListener('click', function () {
      const tab = this.getAttribute('data-tab-module');
      updateTabModule(tab);
    });
  });

  updateTabModule(tabModuleWrapper.getAttribute('data-tab-module-current'));

  // Script pour les tabs ecosystem
  const tabEcosystemBlock = document.querySelector('.tabs-ecosystem-block');
  const tabEcosystemLinks = document.querySelectorAll('.tab-ecosystem-link');
  const tabEcosystemPanes = document.querySelectorAll('.tab-ecosystem-pane');

  function updateTabEcosystem(currentTab) {
    tabEcosystemBlock.setAttribute('data-current-tab', currentTab);

    tabEcosystemLinks.forEach(link => {
      if (link.getAttribute('data-tab-ecosystem') === currentTab) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });

    tabEcosystemPanes.forEach(pane => {
      if (pane.getAttribute('data-tab-ecosystem') === currentTab) {
        pane.classList.add('active');
      } else {
        pane.classList.remove('active');
      }
    });
  }

  tabEcosystemLinks.forEach(link => {
    link.addEventListener('click', function() {
      const tab = this.getAttribute('data-tab-ecosystem');
      updateTabEcosystem(tab);
    });
  });

  const initialTab = tabEcosystemBlock.getAttribute('data-current-tab');
  if (initialTab) {
    updateTabEcosystem(initialTab);
  } else {
    const firstTab = tabEcosystemLinks[0].getAttribute('data-tab-ecosystem');
    updateTabEcosystem(firstTab);
  }

  // Script pour gérer la taille du contenu des tabs ecosystem
  const ecosystemTabLinks = document.querySelectorAll('.tab-ecosystem-link');

  ecosystemTabLinks.forEach(tabLink => {
    const tabContent = tabLink.querySelector('.tab-ecosystem-content');

    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === 'class') {
          if (tabLink.classList.contains('active')) {
            // Expand
            tabContent.style.height = tabContent.scrollHeight + 'px';
          } else {
            // Collapse
            tabContent.style.height = '0';
          }
        }
      });
    });

    observer.observe(tabLink, { attributes: true });

    // Initial setup
    if (tabLink.classList.contains('active')) {
      tabContent.style.height = tabContent.scrollHeight + 'px';
    } else {
      tabContent.style.height = '0';
    }
  });
  
  // Script pour les dropdowns
  const dropdowns = document.querySelectorAll('.dropdown');

  dropdowns.forEach(dropdown => {
    const toggle = dropdown.querySelector('.dropdown-toggle');

    // Fonction pour mettre à jour l'attribut data-open
    function updateDropdownStatus() {
      if (toggle.classList.contains('w--open')) {
        dropdown.setAttribute('data-open', 'true');
      } else {
        dropdown.setAttribute('data-open', 'false');
      }
    }

    // Observer pour surveiller les changements de classe
    const observer = new MutationObserver(updateDropdownStatus);

    // Configurer l'observer pour écouter les changements d'attributs et de sous-arbres
    observer.observe(toggle, {
      attributes: true,
      attributeFilter: ['class'],
    });

    // Initialiser l'état
    updateDropdownStatus();
  });
});