web/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx

"use client"

import { useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"

import { trpc } from "@/lib/trpc/client"
import { selectRateRoomsAvailabilityInputSchema } from "@/server/routers/hotels/input"

import Alert from "@/components/TempDesignSystem/Alert"
import useLang from "@/hooks/useLang"
import RatesProvider from "@/providers/RatesProvider"
import { convertSearchParamsToObj, searchParamsToRecord } from "@/utils/url"

import RateSummary from "./RateSummary"
import Rooms from "./Rooms"
import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"

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

import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"
import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import { AlertTypeEnum } from "@/types/enums/alert"

export function RoomsContainer({
  hotelType,
  roomCategories,
  vat,
}: RoomsContainerProps) {
  const lang = useLang()
  const intl = useIntl()
  const searchParams = useSearchParams()

  const booking = convertSearchParamsToObj<SelectRateSearchParams>(
    searchParamsToRecord(searchParams)
  )

  const bookingInput = selectRateRoomsAvailabilityInputSchema.safeParse({
    booking,
    lang,
  })

  const { data, isFetching, isError, error } =
    trpc.hotel.availability.selectRate.rooms.useQuery(bookingInput.data!, {
      retry(failureCount, error) {
        if (error.data?.code === "BAD_REQUEST") {
          return false
        }

        return failureCount <= 3
      },
      enabled: bookingInput.success,
    })

  if (isFetching) {
    return <RoomsContainerSkeleton />
  }

  if (isError || !bookingInput.success) {
    const errorMessage = getErrorMessage(
      error?.data?.zodError?.formErrors,
      intl
    )

    return (
      <div className={styles.errorContainer}>
        <Alert type={AlertTypeEnum.Alarm} heading={errorMessage} />
      </div>
    )
  }

  return (
    <RatesProvider
      booking={booking}
      hotelType={hotelType}
      roomCategories={roomCategories}
      roomsAvailability={data}
      vat={vat}
    >
      <Rooms />
      <RateSummary />
    </RatesProvider>
  )
}

function getErrorMessage(
  formErrors: string[] | undefined,
  intl: ReturnType<typeof useIntl>
) {
  const firstError = formErrors?.at(0)

  switch (firstError) {
    case "FROMDATE_INVALID":
    case "TODATE_INVALID":
    case "TODATE_MUST_BE_AFTER_FROMDATE":
    case "FROMDATE_CANNOT_BE_IN_THE_PAST": {
      return intl.formatMessage({
        defaultMessage: "Invalid dates",
      })
    }
    default:
      return intl.formatMessage({
        defaultMessage: "Something went wrong",
      })
  }
}