lib/hooks/useScrollAnchor.tsx

import { useCallback, useEffect, useRef, useState } from 'react';

export const useScrollAnchor = (scrollBottom: number) => {
  const messagesRef = useRef<HTMLDivElement>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const visibilityRef = useRef<HTMLDivElement>(null);

  // const [isAtBottom, setIsAtBottom] = useState(true);
  const [isVisible, setIsVisible] = useState(false);

  const scrollToBottom = useCallback(() => {
    if (visibilityRef.current) {
      visibilityRef.current.scrollIntoView({
        block: 'end',
        behavior: 'smooth',
      });
    }
  }, []);

  // useEffect(() => {
  //   if (messagesRef.current) {
  //     if (isAtBottom && !isVisible) {
  //       messagesRef.current.scrollIntoView({
  //         block: 'end',
  //       });
  //     }
  //   }
  // }, [isAtBottom, isVisible]);

  /**
   * Seem to be broken, no time to fix
   */
  // useEffect(() => {
  //   const { current } = scrollRef;

  //   if (current) {
  //     const handleScroll = (event: Event) => {
  //       const target = event.target as HTMLDivElement;
  //       const offset = 100;
  //       console.log(
  //         '[Ming] ~ handleScroll ~ target.scrollTop + target.clientHeight:',
  //         target.scrollTop + target.clientHeight - target.scrollHeight,
  //       );
  //       const isAtBottom =
  //         target.scrollTop + target.clientHeight >=
  //         target.scrollHeight - offset;

  //       setIsAtBottom(isAtBottom);
  //     };

  //     current.addEventListener('scroll', handleScroll, {
  //       passive: true,
  //     });
  //     console.log('[Ming] ~ useEffect ~ current:', current);

  //     return () => {
  //       current.removeEventListener('scroll', handleScroll);
  //     };
  //   }
  // }, []);

  useEffect(() => {
    if (visibilityRef.current) {
      let observer = new IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              setIsVisible(true);
            } else {
              setIsVisible(false);
            }
          });
        },
        {
          rootMargin: `0px 0px -${scrollBottom}px 0px`,
        },
      );

      observer.observe(visibilityRef.current);

      return () => {
        observer.disconnect();
      };
    }
  });

  return {
    messagesRef,
    scrollRef,
    visibilityRef,
    scrollToBottom,
    isVisible,
  };
};