import { useCallback, useRef } from 'react';
import { useLocalStorage } from 'usehooks-ts';

import useDebounceCallback from '@/hooks/useDebounceCallback';

export default function useScrollMemory(key: string) {
  const [scrollTop, setScrollTop] = useLocalStorage(key, 0);
  const scrollTopRef = useRef(scrollTop);
  const debouncedSaveScroll = useDebounceCallback(
    (x: number) => setScrollTop(x),
    250
  );
  const receiveRef = useCallback((element: HTMLDivElement) => {
    if (element) {
      element.scrollTop = scrollTopRef.current;
      element.addEventListener('scroll', () =>
        debouncedSaveScroll(element.scrollTop)
      );
    }
  }, []);
  return receiveRef;
}