web/packages/design-system/lib/components/Lightbox/Gallery/index.tsx

'use client'
import { AnimatePresence, motion } from 'motion/react'
import { useEffect, useState } from 'react'
import { Button as ButtonRAC } from 'react-aria-components'
import { useIntl } from 'react-intl'

import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'

import Image from '../../Image'

import styles from './gallery.module.css'
import { LightboxImage } from '..'

type GalleryProps = {
  images: LightboxImage[]
  onClose: () => void
  onSelectImage: (image: LightboxImage) => void
  onImageClick: () => void
  selectedImage: LightboxImage | null
  hideLabel?: boolean
}

export default function Gallery({
  images,
  onClose,
  onSelectImage,
  onImageClick,
  selectedImage,
  hideLabel,
}: GalleryProps) {
  const intl = useIntl()
  const [animateLeft, setAnimateLeft] = useState(true)
  const mainImage = selectedImage || images[0]
  const mainImageIndex = images.findIndex((img) => img === mainImage)

  function getThumbImages() {
    const thumbs = []
    for (let i = 1; i <= Math.min(5, images.length); i++) {
      const index = (mainImageIndex + i) % images.length
      thumbs.push(images[index])
    }
    return thumbs
  }

  function handleNext() {
    setAnimateLeft(true)
    const nextIndex = (mainImageIndex + 1) % images.length
    onSelectImage(images[nextIndex])
  }

  function handlePrev() {
    setAnimateLeft(false)
    const prevIndex = (mainImageIndex - 1 + images.length) % images.length
    onSelectImage(images[prevIndex])
  }

  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'ArrowLeft') {
      handlePrev()
    } else if (e.key === 'ArrowRight') {
      handleNext()
    }
  }

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  })

  const variants = {
    initial: (animateLeft: boolean) => ({
      opacity: 0,
      x: animateLeft ? 300 : -300,
    }),
    animate: { opacity: 1, x: 0 },
    exit: (animateLeft: boolean) => ({
      opacity: 0,
      x: animateLeft ? -300 : 300,
    }),
  }

  return (
    <div className={styles.galleryContainer}>
      <IconButton
        theme="Black"
        style="Muted"
        className={styles.closeButton}
        onPress={onClose}
        aria-label={intl.formatMessage({
          defaultMessage: 'Close',
        })}
      >
        <MaterialIcon
          icon="chevron_left"
          color="CurrentColor"
          size={24}
          className={styles.mobileCloseIcon}
        />
        <MaterialIcon
          icon="close"
          color="CurrentColor"
          size={24}
          className={styles.desktopCloseIcon}
        />
      </IconButton>

      {/* Desktop Gallery */}
      <div className={styles.desktopGallery}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p className={styles.galleryHeader}>
            {mainImage.caption && !hideLabel && (
              <span className={styles.imageCaption}>{mainImage.caption}</span>
            )}
          </p>
        </Typography>
        <div className={styles.mainImageWrapper}>
          <AnimatePresence initial={false} custom={animateLeft}>
            <motion.div
              key={mainImage.src}
              className={styles.mainImageContainer}
              custom={animateLeft}
              variants={variants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.3 }}
            >
              <ButtonRAC
                onPress={onImageClick}
                className={styles.imageButton}
                aria-label={intl.formatMessage({
                  defaultMessage: 'Open image',
                })}
              >
                <Image
                  src={mainImage.src}
                  alt={mainImage.alt}
                  fill
                  sizes="(min-width: 1000px) 1000px, 100vw"
                  className={styles.image}
                />
              </ButtonRAC>
            </motion.div>
          </AnimatePresence>
          <motion.button
            className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
            onClick={handlePrev}
          >
            <MaterialIcon icon="arrow_back" color="CurrentColor" />
          </motion.button>
          <motion.button
            className={`${styles.navigationButton} ${styles.galleryNextButton}`}
            onClick={handleNext}
          >
            <MaterialIcon icon="arrow_forward" color="CurrentColor" />
          </motion.button>
        </div>
        <div className={styles.desktopThumbnailGrid}>
          <AnimatePresence initial={false}>
            {getThumbImages().map((image, index) => (
              <motion.div
                key={image.smallSrc || image.src}
                className={styles.thumbnailContainer}
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -50 }}
                transition={{ duration: 0.2, delay: index * 0.05 }}
              >
                <ButtonRAC
                  className={styles.imageButton}
                  onPress={() => onSelectImage(image)}
                  aria-label={intl.formatMessage({
                    defaultMessage: 'Open image',
                  })}
                >
                  <Image
                    src={image.smallSrc || image.src}
                    alt={image.alt}
                    fill
                    sizes="200px"
                    className={styles.image}
                  />
                </ButtonRAC>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      </div>

      {/* Mobile Gallery */}
      <div className={styles.mobileGallery}>
        {images.map((image, index) => (
          <motion.div
            key={image.smallSrc || image.src}
            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: index * 0.05 }}
          >
            <ButtonRAC
              className={styles.imageButton}
              aria-label={intl.formatMessage({ defaultMessage: 'Open image' })}
              onPress={() => {
                onSelectImage(image)
                onImageClick()
              }}
            >
              <Image
                src={image.smallSrc || image.src}
                alt={image.alt}
                fill
                sizes="100vw"
                className={styles.image}
              />
            </ButtonRAC>
          </motion.div>
        ))}
      </div>
    </div>
  )
}