import { useIntl } from "react-intl"

import ImageGallery from "@/components/ImageGallery"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import { getBedIcon } from "./bedIcon"
import { getFacilityIcon } from "./facilityIcon"

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

import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek"

export default function RoomSidePeek({
  room,
  activeSidePeek,
  close,
}: RoomSidePeekProps) {
  const intl = useIntl()

  const roomSize = room.roomSize
  const occupancy = room.occupancy.total
  const roomDescription = room.descriptions.medium
  const images = room.images

  return (
    <SidePeek
      title={room.name}
      isOpen={activeSidePeek === SidePeekEnum.roomDetails}
      handleClose={close}
    >
      <div className={styles.wrapper}>
        <div className={styles.mainContent}>
          <Body color="baseTextMediumContrast">
            {roomSize.min === roomSize.max
              ? roomSize.min
              : `${roomSize.min} - ${roomSize.max}`}
            m².{" "}
            {intl.formatMessage(
              { id: "booking.accommodatesUpTo" },
              { nrOfGuests: occupancy }
            )}
          </Body>
          <div className={styles.imageContainer}>
            <ImageGallery images={images} title={room.name} height={280} />
          </div>
          <Body color="uiTextHighContrast">{roomDescription}</Body>
        </div>
        <div className={styles.listContainer}>
          <Subtitle type="two" color="uiTextHighContrast">
            {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
          </Subtitle>
          <ul className={styles.facilityList}>
            {room.roomFacilities
              .sort((a, b) => a.sortOrder - b.sortOrder)
              .map((facility) => {
                const Icon = getFacilityIcon(facility.name)
                return (
                  <li key={facility.name}>
                    {Icon && <Icon color="uiTextMediumContrast" />}
                    <Body
                      asChild
                      className={!Icon ? styles.noIcon : undefined}
                      color="uiTextMediumContrast"
                    >
                      <span>{facility.name}</span>
                    </Body>
                  </li>
                )
              })}
          </ul>
        </div>
        <div className={styles.listContainer}>
          <Subtitle type="two" color="uiTextHighContrast">
            {intl.formatMessage({ id: "booking.bedOptions" })}
          </Subtitle>
          <Body color="grey">
            {intl.formatMessage({ id: "booking.basedOnAvailability" })}
          </Body>
          <ul className={styles.bedOptions}>
            {room.roomTypes.map((roomType) => {
              const BedIcon = getBedIcon(roomType.mainBed.type)
              return (
                <li key={roomType.code}>
                  {BedIcon && (
                    <BedIcon
                      color="uiTextMediumContrast"
                      width={24}
                      height={24}
                    />
                  )}
                  <Body color="uiTextMediumContrast" asChild>
                    <span>{roomType.mainBed.description}</span>
                  </Body>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </SidePeek>
  )
}
