import { Suspense } from "react"

import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import { RoomsContainer } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainer"
import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton"
import { setLang } from "@/i18n/serverContext"

import { getHotelSearchDetails } from "../utils"
import { getValidDates } from "./getValidDates"

import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import type { LangParams, PageArgs } from "@/types/params"

export default async function SelectRatePage({
  params,
  searchParams,
}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
  setLang(params.lang)
  const searchDetails = await getHotelSearchDetails({ searchParams })
  if (!searchDetails) return null
  const { hotel, adultsInRoom, childrenInRoomArray } = searchDetails

  const { fromDate, toDate } = getValidDates(
    searchParams.fromDate,
    searchParams.toDate
  )

  const hotelId = +hotel.id
  return (
    <>
      <HotelInfoCard
        hotelId={hotelId}
        lang={params.lang}
        fromDate={fromDate.toDate()}
        toDate={toDate.toDate()}
        adultCount={adultsInRoom}
        childArray={childrenInRoomArray}
      />

      <Suspense key={hotelId} fallback={<RoomsContainerSkeleton />}>
        <RoomsContainer
          hotelId={hotelId}
          lang={params.lang}
          fromDate={fromDate.toDate()}
          toDate={toDate.toDate()}
          adultCount={adultsInRoom}
          childArray={childrenInRoomArray}
        />
      </Suspense>
    </>
  )
}