"use client"

import { TRPCClientError } from "@trpc/client"
import { useIntl } from "react-intl"

import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { Alert } from "@scandic-hotels/design-system/Alert"

import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"

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"

export function RoomsContainer({}: RoomsContainerProps) {
  const intl = useIntl()

  const {
    availability: { error, isFetching, isError },
    input: { hasError: hasInputError, errorCode },
  } = useSelectRateContext()

  if (isFetching) {
    return <RoomsContainerSkeleton />
  }

  if (isError || hasInputError) {
    const errorMessage = getErrorMessage(error ?? errorCode, intl)

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

  return (
    <>
      <Rooms />
      <RateSummary />
    </>
  )
}

function getErrorMessage(error: unknown, intl: ReturnType<typeof useIntl>) {
  let errorCode = ""
  if (error instanceof TRPCClientError) {
    errorCode = error.data?.zodError?.formErrors?.at(0)
  } else if (typeof error == "string") {
    errorCode = error
  }

  switch (errorCode) {
    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",
      })
  }
}