export default function singleConseil() {
  const hasChapterIndex = document.querySelector('.chapter_index__list');
  if (!hasChapterIndex) return;

  let chapterIndex = document.querySelector('.chapter_index');
  let questionBlocks = document.querySelectorAll('.questions-container-block');

  function handleLinkScrollToTarget(e) {
    e.preventDefault();
    let target = e.target.getAttribute('href');
    let targetBlock = document.querySelector(target);

    targetBlock.setAttribute('tabindex', '0');
    targetBlock.scrollIntoView({
      behavior: 'smooth',
    });
    targetBlock.focus({ preventScroll: true });
  }
  function handleChapterIndicatorPosition(targetPosition) {
    let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
    chapterIndicator.style.top = targetPosition + 'px';
  }

  let chapterLinks = document.querySelectorAll('.chapter_index__link');

  chapterLinks.forEach((link) => {
    link.addEventListener('click', (e) => {
      handleLinkScrollToTarget(e);
      handleChapterIndicatorPosition(e.target.offsetTop);
    });
  });

  // Register IntersectionObserver
  const io = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // Add 'active' class if observation target is inside viewport
          entry.target.classList.add('active');
          const blockId = entry.target.getAttribute('id');
          const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
          handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
        } else {
          // Remove 'active' class otherwise
          // entry.target.classList.remove('active');
        }
      });
    },
    {
      rootMargin: '-10% 0px -70% 0px',
    }
  );

  function buildAllBlocksToObserve() {
    const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
    const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
    const plusLoinBlock = document.querySelector('#aller-plus-loin');
    let allBlocks = [];

    if (questionsContainerBlocks) allBlocks = [...questionsContainerBlocks];
    if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock);
    if (plusLoinBlock) allBlocks.push(plusLoinBlock);

    return allBlocks;
  }

  allBlocks = buildAllBlocksToObserve();

  allBlocks.forEach((el) => {
    console.log(el);
    io.observe(el);
  });
}