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

export const useFadeScrollStyle = ({
  scrollContainerRef,
}: {
  scrollContainerRef: RefObject<HTMLDivElement | null>;
}) => {
  const [fadeScrollStyle, setFadeScrollStyle] = useState<
    'left' | 'right' | 'both' | 'none'
  >('none');
  const updateFadeScrollStyle = useCallback(() => {
    if (!scrollContainerRef.current) return;
    const { scrollLeft, scrollWidth } = scrollContainerRef.current;
    if (
      scrollLeft === 0 &&
      scrollWidth <= scrollContainerRef.current.getBoundingClientRect().width
    ) {
      setFadeScrollStyle('none');
    } else if (
      scrollLeft === 0 &&
      scrollWidth > scrollContainerRef.current.getBoundingClientRect().width
    ) {
      setFadeScrollStyle('right');
    } else if (
      scrollLeft + scrollContainerRef.current.getBoundingClientRect().width >=
      scrollWidth
    ) {
      setFadeScrollStyle('left');
    } else {
      setFadeScrollStyle('both');
    }
  }, []);
  useEffect(() => {
    updateFadeScrollStyle();
  }, [
    scrollContainerRef.current?.scrollLeft,
    scrollContainerRef.current?.scrollWidth,
    scrollContainerRef.current?.clientWidth,
  ]);
  return { fadeScrollStyle, updateFadeScrollStyle };
};