import { useEffect, useRef } from 'react';

const useIntersectionObserver = (items, callbackFn) => {
  const observer = useRef(null);
  const elementsRef = useRef([]);

  useEffect(() => {
    if (observer.current) observer.current.disconnect(); // Temizleme işlemi

    observer.current = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // DOM elementindeki dataset.id'yi alıp, items array'deki ilgili item'ı buluyoruz
          const item = items.find(i => i.id === entry.target.dataset.id);
          if (item) {
            callbackFn(item); // Gözlemlenen item'ı callback'e aktarıyoruz
          }
        }
      });
    });

    elementsRef.current.forEach((el) => {
      if (el) observer.current.observe(el); // Her DOM elementini gözlemliyoruz
    });

    return () => {
      if (observer.current) observer.current.disconnect(); // Temizleme işlemi
    };
  }, [items, callbackFn]);

  // Dinamik ref'leri her bir DOM elementine bağlamak için dönen bir fonksiyon
  const setRef = (el, index) => {
    elementsRef.current[index] = el;
  };

  return setRef;
};

export default useIntersectionObserver;