import {
  useEffect,
  useRef,
} from 'react'

import forEach from 'lodash/forEach'

export const useItemsList = () => {
  const ref = useRef<HTMLUListElement>(null)

  useEffect(() => {
    if (ref.current) {
      /**
       * Реализуем ленивую загрузку изображений
       * для оптимизации запросов к серверу
       */

      // устанавливаем настройки
      const options = {
        // область просмотра
        root: ref.current.parentElement,
        // процент пересечения с областью просмотра - половина изображения
        threshold: 0.5,
      }

      // создаем наблюдатель
      const intersectionObserver = new IntersectionObserver((entries, observer) => {
        // для каждой записи-целевого элемента
        forEach(entries, (entry) => {
          // если элемент является наблюдаемым
          if (entry.isIntersecting) {
            const imgElem = entry.target as HTMLImageElement
            // устанавливаем аттрибут src из data-src
            imgElem.src = imgElem.dataset.src!

            // прекращаем наблюдение
            observer.unobserve(imgElem)
          }
        })
      }, options)

      const imgElems = ref.current.getElementsByTagName('img')

      // находим все элементы img и делаем наблюдаемыми
      forEach(imgElems, (imgElem) => {
        intersectionObserver.observe(imgElem)
      })
    }
  }, [])

  return { ref }
}
