import { RefObject, useEffect, useState } from 'react';

export const useElementOnScreen = (elementRef: RefObject<HTMLDivElement>, elementDisplacement?: number) => {
  const [ isElementOnScreen, setIsElementOnScreen ] = useState(true);

  const checkElementPosition = () => {
    if (!elementRef?.current) {
      return;
    }

    const { top } = elementRef.current.getBoundingClientRect();
    const displacedTop = top - (elementDisplacement ?? 0);
    const elementFitsScreen = displacedTop > 0;

    setIsElementOnScreen(elementFitsScreen);
  };

  useEffect(() => {
    checkElementPosition();
    window.addEventListener('scroll', checkElementPosition);
    window.addEventListener('resize', checkElementPosition);

    return () => {
      window.removeEventListener('scroll', checkElementPosition);
      window.removeEventListener('resize', checkElementPosition);
    };
  }, [ elementRef?.current ]);

  return isElementOnScreen;
};