function initBullet(focusPoint) {
  const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
  const focusPointPosition = {
    x: focusPoint.getAttribute('data-postion-x'),
    y: focusPoint.getAttribute('data-postion-y'),
  };

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

  const focusPointPopupTitle = document.createElement('h4');
  // focusPointPopupTitle.textContent = focusTitle;
  focusPointPopupTitle.innerHTML = focusTitle;
  focusPointPopupTitle.className = 'tooltip-title';
  focusPointPopupContainer.style.left = `${focusPointPosition.x}%`;
  focusPointPopupContainer.style.top = `${focusPointPosition.y}%`;
  focusPointPopupContainer.appendChild(focusPointPopupTitle);

  // console.log(focusPointPosition);

  // focusPointPopupContainer.style.left = `${focusPoint.getAttribute}px`;
  // focusPoint.appendChild(focusPointPopupContainer);
  focusPoint.parentNode.insertBefore(focusPointPopupContainer, focusPoint.nextSibling);

  focusPoint.setAttribute('data-hovered', '');
  // focusPoint.style.zIndex = 1;
  // focusPointPopupContainer.style.zIndex = 99;
}
function getCurrentPos(entry) {
  return parseInt(getComputedStyle(entry.target, null).getPropertyValue('left'));
}

async function observeBullets(focusBulletPoints) {
  const bulletsObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const margin = 10;

      if (!entry.isIntersecting) {
        return;
      }
      // DEPASSE À GAUCHE
      if (entry.boundingClientRect.x < 0) {
        const currentPos = getCurrentPos(entry);
        const missingSpace = Math.abs(entry.boundingClientRect.x);
        entry.target.style.left = `${currentPos + missingSpace + margin}px`;
        entry.target.style.setProperty('--bullet-x-position', '15%');
      }
      // DEPASSE À DROITE
      if (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {
        const currentPos = getCurrentPos(entry);
        const difference = entry.boundingClientRect.width - entry.intersectionRect.width;
        entry.target.style.left = `${currentPos - difference - margin}px`;
        entry.target.style.setProperty('--bullet-x-position', `85% `);
      }
    });
  });

  focusBulletPoints.forEach((focusBullet) => {
    const bulletExplanationSibling = focusBullet.nextElementSibling;
    console.log(bulletExplanationSibling);
    bulletsObserver.observe(bulletExplanationSibling);
  });
}

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

  focusBulletPoints.forEach((focusPoint) => {
    initBullet(focusPoint);
  });
  observeBullets(focusBulletPoints);
}