"use client"

import { memo, useState } from "react"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox"

import Caption from "../TempDesignSystem/Text/Caption"

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

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

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

  if (!images || images.length === 0 || imageError) {
    return <div className={styles.imagePlaceholder} />
  }

  const firstImage = images[0]

  return (
    <>
      <div
        className={`${styles.triggerArea} ${fill ? styles.fill : ""}`}
        role="button"
        onClick={() => setLightboxIsOpen(true)}
        aria-label={intl.formatMessage({ id: "Open image gallery" })}
      >
        <Image
          className={styles.image}
          src={firstImage.src}
          alt={firstImage.alt}
          onError={() => setImageError(true)}
          {...imageProps}
        />
        <div className={styles.imageCount}>
          <MaterialIcon icon="filter" color="Icon/Inverted" />
          <Caption color="white" type="label">
            {images.length}
          </Caption>
        </div>
      </div>
      <Lightbox
        images={images}
        dialogTitle={title}
        isOpen={lightboxIsOpen}
        onClose={() => setLightboxIsOpen(false)}
        hideLabel={hideLabel}
      />
    </>
  )
}

export default memo(ImageGallery)