export default function SchemaBulletPointsInit() {
  const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
  if (!focusBulletPoints) return;

  function initBullet(focusPoint) {
    const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');

    const focusPointPopupContainer = document.createElement('div');
    focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';

    const focusPointPopupTitle = document.createElement('h4');
    focusPointPopupTitle.textContent = focusTitle;
    focusPointPopupTitle.className = 'tooltip-title';

    focusPointPopupContainer.appendChild(focusPointPopupTitle);
    focusPoint.appendChild(focusPointPopupContainer);
    focusPoint.setAttribute('data-hovered', '');
    // focusPoint.style.zIndex = 1;
    // focusPointPopupContainer.style.zIndex = 99;

  }
  function handleVisibility(focusPoint) {
    // console.log(focusPoint);
  }
  // Register IntersectionObserver
  const bulletsObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // Check aspect ratio to be sure the element is visible
      const aspect = entry.intersectionRatio > 0;

      if (entry.isIntersecting) {
        console.log(entry.target);
        console.log(entry.intersectionRatio);
        // 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');
      }
    });
  });

  focusBulletPoints.forEach((focusPoint) => {
    const focusPointsContainer = focusPoint.parentElement;
    initBullet(focusPoint);
    const focusPointTooltipContainer = focusPoint.querySelector(
      '.homegrade-blocks-focus-point-bullet__tooltip-container'
    );
    // bulletsObserver.observe(focusPointTooltipContainer);
  });
}