'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 Lightbox from '../Lightbox'
import { Typography } from '../Typography'

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

export interface GalleryImage {
  src: string
  alt: string
  caption?: 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:
          sizes ?? 'auto, (max-width: 400px) 100vw, (min-width: 401px) 500px',
      }
    : { height, width: height * 1.5 }

  if (!images?.length || 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({
            id: 'imageGallery.openImageGallery',
            defaultMessage: 'Open image gallery',
          })}
        />
      </div>
      <Lightbox
        images={images}
        dialogTitle={title}
        onClose={() => setIsOpen(false)}
        isOpen={isOpen}
        hideLabel={hideLabel}
      />
    </>
  )
}

export default memo(ImageGallery)