web/apps/scandic-web/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 "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
import Lightbox from "@scandic-hotels/design-system/Lightbox"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

import type { ImageGalleryProps } from "@/types/components/imageGallery"

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)