"use client"

import { useIntl } from "react-intl"

import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { formatPrice } from "@/utils/numberFormatting"

import Room from "../Room"

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

import type { BookingConfirmationReceiptRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"

export default function ReceiptRooms({
  booking,
  room,
  linkedReservations,
}: BookingConfirmationReceiptRoomsProps) {
  const intl = useIntl()

  if (linkedReservations.some((reservation) => !reservation)) {
    return null
  }

  const grandTotal = linkedReservations.reduce((acc, reservation) => {
    const reservationTotalPrice = reservation?.booking.totalPrice || 0
    return acc + reservationTotalPrice
  }, booking.totalPrice)

  return (
    <>
      <Room
        booking={booking}
        room={room}
        roomNumber={linkedReservations.length ? 1 : null}
      />
      {linkedReservations.map((reservation, idx) => {
        if (!reservation?.room) {
          return null
        }
        return (
          <Room
            key={reservation?.booking.confirmationNumber}
            booking={reservation.booking}
            room={reservation.room}
            roomNumber={idx + 2}
          />
        )
      })}
      <Divider color="primaryLightSubtle" />
      <div className={styles.price}>
        <div className={styles.entry}>
          <Body textTransform="bold">
            {intl.formatMessage({ id: "Total price" })}
          </Body>
          <Body textTransform="bold">
            {formatPrice(intl, grandTotal, booking.currencyCode)}
          </Body>
        </div>
        <div className={styles.entry}>
          <Button
            className={styles.btn}
            intent="text"
            size="small"
            theme="base"
            variant="icon"
            wrapping
          >
            {intl.formatMessage({ id: "Price details" })}
            <ChevronRightSmallIcon />
          </Button>
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage(
              { id: "Approx. {value}" },
              {
                value: "N/A",
              }
            )}
          </Caption>
        </div>
      </div>
    </>
  )
}
