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

import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"

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

import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { AlertTypeEnum } from "@/types/enums/alert"

export default function Confirmation({
  booking,
  hotel,
  room,
}: ConfirmationProps) {
  const intl = useIntl()
  const mainRef = useRef<HTMLElement | null>(null)

  const failedToVerifyMembership =
    booking.rateDefinition.isMemberRate && !booking.guest.membershipNumber

  return (
    <main className={styles.main} ref={mainRef}>
      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
      <div className={styles.booking}>
        {failedToVerifyMembership && (
          <Alert
            type={AlertTypeEnum.Info}
            heading={intl.formatMessage({
              id: "Failed to verify membership",
            })}
            text={intl.formatMessage({
              id: "Your booking(s) is confirmed but we could not verify your membership. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay.",
            })}
          />
        )}
        <Rooms booking={booking} room={room} />
        <PaymentDetails booking={booking} />
        <Divider color="primaryLightSubtle" />
        <HotelDetails hotel={hotel} />
        <Promos
          confirmationNumber={booking.confirmationNumber}
          hotelId={hotel.operaId}
          lastName={booking.guest.lastName}
        />
        <div className={styles.mobileReceipt}>
          <Receipt booking={booking} hotel={hotel} room={room} />
        </div>
      </div>
      <aside className={styles.aside}>
        <SidePanel variant="receipt">
          <Receipt booking={booking} hotel={hotel} room={room} />
        </SidePanel>
      </aside>
    </main>
  )
}