web/packages/design-system/lib/components/ImageGallery/index.tsx

'use client'

import { memo, useState } from 'react'
import { Button as ButtonRAC } from 'react-aria-components'
import { useIntl } from 'react-intl'

import { MaterialIcon } from '../Icons/MaterialIcon'
import Image from '../Image'
import ImageFallback from '../ImageFallback'
import { Typography } from '../Typography'
import Lightbox from '../Lightbox'

import styles from './imageGallery.module.css'

export interface GalleryImage {
  src: string
  alt: string
  caption?: string | null
  smallSrc?: string | null
}

type ImageGalleryProps = {
  images?: GalleryImage[]
  title: string
  fill?: boolean
  width?: number
  height?: number
  sizes?: string
  hideLabel?: boolean
  imageCountPosition?: 'top' | 'bottom'
}

function ImageGallery({
  images,
  title,
  fill,
  height = 280,
  sizes,
  hideLabel,
  imageCountPosition = 'bottom',
}: ImageGalleryProps) {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)
  const [imageError, setImageError] = useState(false)
  const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }

  if (!images || images.length === 0 || imageError) {
    return <ImageFallback />
  }

  const firstImage = images[0]

  return (
    <>
      <div className={styles.wrapper}>
        <Image
          className={styles.image}
          src={firstImage.src}
          alt={firstImage.alt}
          onError={() => setImageError(true)}
          {...imageProps}
        />
        <Typography variant={'Body/Supporting text (caption)/smRegular'}>
          <span
            className={`${styles.imageCount} ${
              imageCountPosition === 'top'
                ? styles.imageCountTop
                : styles.imageCountBottom
            }`}
          >
            <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
            <span>{images.length}</span>
          </span>
        </Typography>
        <ButtonRAC
          className={styles.triggerArea}
          onPress={() => setIsOpen(true)}
          aria-label={intl.formatMessage({
            defaultMessage: 'Open image gallery',
          })}
        />
      </div>
      {isOpen ? (
        <Lightbox
          images={images}
          dialogTitle={title}
          onClose={() => setIsOpen(false)}
          hideLabel={hideLabel}
        />
      ) : null}
    </>
  )
}

export default memo(ImageGallery)