"use client"
import { useIntl } from "react-intl"

import { useRatesStore } from "@/stores/select-rate"

import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import ImageGallery from "@/components/ImageGallery"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

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

import type { RoomListItemImageProps } from "@/types/components/hotelReservation/selectRate/roomListItem"

export default function RoomImage({
  roomPackages,
  roomsLeft,
  roomType,
  roomTypeCode,
}: RoomListItemImageProps) {
  const intl = useIntl()
  const { selectedPackages } = useRoomContext()
  const roomCategories = useRatesStore((state) => state.roomCategories)

  const showLowInventory = roomsLeft > 0 && roomsLeft < 5

  const selectedRoom = roomCategories.find((roomCategory) =>
    roomCategory.roomTypes.find((roomType) => roomType.code === roomTypeCode)
  )

  const galleryImages = mapApiImagesToGalleryImages(selectedRoom?.images || [])

  return (
    <div className={styles.imageContainer}>
      <div className={styles.chipContainer}>
        {showLowInventory ? (
          <span className={styles.chip}>
            <Footnote color="burgundy" textTransform="uppercase">
              {intl.formatMessage(
                {
                  defaultMessage: "{amount, number} left",
                },
                { amount: roomsLeft }
              )}
            </Footnote>
          </span>
        ) : null}
        {roomPackages
          .filter((pkg) =>
            selectedPackages.find((spkg) => spkg.code === pkg.code)
          )
          .map((pkg) => (
            <span className={styles.chip} key={pkg.code}>
              {IconForFeatureCode({ featureCode: pkg.code, size: 16 })}
            </span>
          ))}
      </div>
      <ImageGallery images={galleryImages} title={roomType} fill />
    </div>
  )
}
