import { notFound } from "next/navigation"
import { Suspense } from "react"

import { getLocations } from "@/lib/trpc/memoizedRequests"

import SelectHotel from "@/components/HotelReservation/SelectHotel"
import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
import {
  generateChildrenString,
  getHotelReservationQueryParams,
} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
import { setLang } from "@/i18n/serverContext"

import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
import type { LangParams, PageArgs } from "@/types/params"

export default async function SelectHotelPage({
  params,
  searchParams,
}: PageArgs<LangParams, SelectHotelSearchParams>) {
  setLang(params.lang)
  const locations = await getLocations()

  if (!locations || "error" in locations) {
    return null
  }
  const city = locations.data.find(
    (location) =>
      location.name.toLowerCase() === searchParams.city.toLowerCase()
  )

  if (!city) return notFound()

  const selectHotelParams = new URLSearchParams(searchParams)
  const selectHotelParamsObject =
    getHotelReservationQueryParams(selectHotelParams)

  if (
    !selectHotelParamsObject.room ||
    selectHotelParamsObject.room.length === 0
  ) {
    return notFound()
  }

  const adultsParams = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
  const childrenParams = selectHotelParamsObject.room[0].child
    ? generateChildrenString(selectHotelParamsObject.room[0].child)
    : undefined // TODO: Handle multiple rooms

  const reservationParams = {
    selectHotelParams,
    searchParams,
    adultsParams,
    childrenParams,
  }

  return (
    <Suspense key={city.name} fallback={<SelectHotelSkeleton />}>
      <SelectHotel
        city={city}
        params={params}
        reservationParams={reservationParams}
      />
    </Suspense>
  )
}