web/packages/design-system/lib/components/Lightbox/Gallery/useThumbNail.ts

"use client"

import { useMemo } from "react"
import { LightboxImage } from ".."

export const THUMBNAIL_WINDOW = 5
export const THUMBNAIL_OFFSET = Math.ceil(THUMBNAIL_WINDOW / 2)

interface useThumbnailProps {
  images: LightboxImage[]
  mainImageIdx: number
}
/*
 * Keep the main image in the center of the thumbnail, unless when it's one of the first or the last pictures.
 */
export function useThumbnail({ images, mainImageIdx }: useThumbnailProps) {
  return useMemo(() => {
    if (mainImageIdx < THUMBNAIL_OFFSET) {
      return {
        images: images.slice(0, THUMBNAIL_WINDOW),
        next: images[THUMBNAIL_WINDOW + 1],
      }
    }
    if (mainImageIdx >= images.length - THUMBNAIL_OFFSET) {
      return {
        previous: images[images.length - THUMBNAIL_WINDOW - 1],
        images: images.slice(images.length - THUMBNAIL_WINDOW, images.length),
      }
    }
    return {
      previous: images[mainImageIdx - THUMBNAIL_OFFSET],
      images: images.slice(
        mainImageIdx - THUMBNAIL_OFFSET + 1,
        mainImageIdx + THUMBNAIL_OFFSET
      ),
      next: images[mainImageIdx + THUMBNAIL_OFFSET],
    }
  }, [images, mainImageIdx])
}