Function useThumbnails

src/components/hooks/useThumbnails.ts:46–374

({
  currentIndex,
  items,
  thumbnailPosition = "bottom",
  disableThumbnailScroll = false,
  slideDuration = DEFAULT_SLIDE_DURATION,
  isRTL = false,
  useTranslate3D = true,
}: UseThumbnailsProps)

 * Custom hook for managing thumbnail bar state and navigation
 */
export function useThumbnails({
  currentIndex,
  items,
  thumbnailPosition = "bottom",
  disableThumbnailScroll = false,
  slideDuration = DEFAULT_SLIDE_DURATION,
  isRTL = false,
  useTranslate3D = true,
}: UseThumbnailsProps): UseThumbnailsReturn {
  const [thumbsTranslate, setThumbsTranslate] = useState(0);
  const [thumbsSwipedTranslate, setThumbsSwipedTranslate] = useState(0);
  const [thumbsStyle, setThumbsStyle] = useState<CSSProperties>({
    transition: `all ${slideDuration}ms ease-out`,
  });
  const [thumbnailsWrapperWidth, setThumbnailsWrapperWidth] = useState(0);
  const [thumbnailsWrapperHeight, setThumbnailsWrapperHeight] = useState(0);
  const [isSwipingThumbnail, setIsSwipingThumbnail] = useState(false);

  const thumbnailsWrapperRef = useRef<HTMLDivElement | null>(null);
  const thumbnailsRef = useRef<HTMLDivElement | null>(null);
  const resizeObserverRef = useRef<ResizeObserver | null>(null);
  const previousIndexRef = useRef(currentIndex);

  const isThumbnailVertical = useCallback(() => {
    return thumbnailPosition === "left" || thumbnailPosition === "right";
  }, [thumbnailPosition]);

  // Calculate thumbnail translation based on current index
  const getThumbsTranslate = useCallback(
    (indexDifference: number): number => {
      if (disableThumbnailScroll) return 0;

      const thumbsElement = thumbnailsRef.current;
      if (!thumbsElement) return 0;

      let hiddenScroll: number;
      const isVertical = isThumbnailVertical();

      if (isVertical) {
        if (thumbsElement.scrollHeight <= thumbnailsWrapperHeight) {
          return 0;
        }
        hiddenScroll = thumbsElement.scrollHeight - thumbnailsWrapperHeight;
      } else {
        if (
          thumbsElement.scrollWidth <= thumbnailsWrapperWidth ||
          thumbnailsWrapperWidth <= 0
        ) {
          return 0;
        }
        hiddenScroll = thumbsElement.scrollWidth - thumbnailsWrapperWidth;
      }

      const perIndexScroll = hiddenScroll / (items.length - 1);
      return indexDifference * perIndexScroll;
    },
    [
      disableThumbnailScroll,