"use client"
import { dt } from "@/lib/dt"

import useLang from "@/hooks/useLang"
import RatesProvider from "@/providers/RatesProvider"

import { useHotelPackages, useRoomsAvailability } from "../utils"
import RateSummary from "./RateSummary"
import Rooms from "./Rooms"
import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"

import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"

export function RoomsContainer({
  adultArray,
  booking,
  childArray,
  fromDate,
  hotelData,
  hotelId,
  isUserLoggedIn,
  toDate,
}: RoomsContainerProps) {
  const lang = useLang()

  const fromDateString = dt(fromDate).format("YYYY-MM-DD")
  const toDateString = dt(toDate).format("YYYY-MM-DD")

  const { data: roomsAvailability, isPending: isLoadingAvailability } =
    useRoomsAvailability(
      adultArray,
      hotelId,
      fromDateString,
      toDateString,
      lang,
      childArray,
      booking.bookingCode
    )

  const { data: packages, isPending: isLoadingPackages } = useHotelPackages(
    adultArray,
    childArray,
    fromDateString,
    toDateString,
    hotelId,
    lang
  )

  if (isLoadingAvailability || isLoadingPackages) {
    return <RoomsContainerSkeleton />
  }

  if (!hotelData?.hotel) {
    return null
  }

  if (packages === null) {
    // TODO: Log packages error
    console.error("[RoomsContainer] unable to fetch packages")
  }

  return (
    <RatesProvider
      booking={booking}
      hotelType={hotelData.hotel.hotelType}
      isUserLoggedIn={isUserLoggedIn}
      packages={packages}
      roomCategories={hotelData.roomCategories}
      roomsAvailability={roomsAvailability}
      vat={hotelData.hotel.vat}
    >
      <Rooms />
      <RateSummary isUserLoggedIn={isUserLoggedIn} />
    </RatesProvider>
  )
}