import { homeHrefs } from "@/constants/homeHrefs"
import { env } from "@/env/server"
import { dt } from "@/lib/dt"
import {
  getAncillaryPackages,
  getBookingConfirmation,
  getProfileSafely,
} from "@/lib/trpc/memoizedRequests"

import Image from "@/components/Image"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import { Ancillaries } from "./Ancillaries"
import BookingSummary from "./BookingSummary"
import { Header } from "./Header"
import Promo from "./Promo"
import { ReferenceCard } from "./ReferenceCard"
import { Room } from "./Room"

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

export async function MyStay({ reservationId }: { reservationId: string }) {
  const { booking, hotel, room } = await getBookingConfirmation(reservationId)
  const userResponse = await getProfileSafely()
  const user = userResponse && !("error" in userResponse) ? userResponse : null
  const intl = await getIntl()
  const lang = getLang()
  const homeUrl = homeHrefs[env.NODE_ENV][lang]
  const fromDate = dt(booking.checkInDate).format("YYYY-MM-DD")
  const toDate = dt(booking.checkOutDate).format("YYYY-MM-DD")
  const hotelId = hotel.operaId
  const ancillaryInput = { fromDate, hotelId, toDate }
  void getAncillaryPackages(ancillaryInput)
  const ancillaryPackages = await getAncillaryPackages(ancillaryInput)

  return (
    <main className={styles.main}>
      <div className={styles.imageContainer}>
        <div className={styles.blurOverlay} />
        {hotel.gallery?.heroImages[0].imageSizes.large && (
          <Image
            className={styles.image}
            src={hotel.gallery.heroImages[0].imageSizes.large}
            alt={hotel.name}
            fill
          />
        )}
      </div>
      <div className={styles.content}>
        <div className={styles.headerContainer}>
          <Header hotel={hotel} />
          <ReferenceCard booking={booking} hotel={hotel} />
        </div>
        {booking.showAncillaries && (
          <Ancillaries ancillaries={ancillaryPackages} />
        )}
        <Room booking={booking} room={room} hotel={hotel} user={user} />
        <BookingSummary booking={booking} hotel={hotel} />
        <Promo
          buttonText={intl.formatMessage({ id: "Book another stay" })}
          href={`${homeUrl}?hotel=${hotel.operaId}`}
          text={intl.formatMessage({
            id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
          })}
          title={intl.formatMessage({ id: "Book your next stay" })}
        />
      </div>
    </main>
  )
}