"use client"

import { useIntl } from "react-intl"

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

import { LinkedReservation } from "./LinkedReservation"
import { Room } from "./Room"

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
import type { Room as RoomProp } from "@scandic-hotels/trpc/types/hotel"

interface BookingConfirmationRoomsProps
  extends Pick<BookingConfirmation, "booking"> {
  mainRoom: RoomProp & {
    bedType: RoomProp["roomTypes"][number]
  }
  checkInTime: string
  checkOutTime: string
}

export function Rooms({
  booking,
  checkInTime,
  checkOutTime,
  mainRoom,
}: BookingConfirmationRoomsProps) {
  const intl = useIntl()

  return (
    <section className={styles.rooms}>
      <div className={styles.room}>
        {booking.linkedReservations.length ? (
          <Typography variant="Title/Subtitle/md">
            <h2 className={styles.roomTitle}>
              {intl.formatMessage(
                {
                  id: "booking.roomIndex",
                  defaultMessage: "Room {roomIndex}",
                },
                { roomIndex: 1 }
              )}
            </h2>
          </Typography>
        ) : null}
        <Room
          booking={booking}
          checkInTime={checkInTime}
          checkOutTime={checkOutTime}
          img={mainRoom.images[0]}
          roomName={mainRoom.name}
        />
      </div>

      {booking.linkedReservations.map((reservation, idx) => (
        <div className={styles.room} key={reservation.confirmationNumber}>
          <Typography variant="Title/Subtitle/md">
            <h2 className={styles.roomTitle}>
              {intl.formatMessage(
                {
                  id: "booking.roomIndex",
                  defaultMessage: "Room {roomIndex}",
                },
                { roomIndex: idx + 2 }
              )}
            </h2>
          </Typography>
          <LinkedReservation
            checkInTime={checkInTime}
            checkOutTime={checkOutTime}
            refId={reservation.refId}
            roomIndex={idx + 1}
          />
        </div>
      ))}
    </section>
  )
}