web/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/index.tsx

"use client"

import { useEffect } from "react"
import { useIntl } from "react-intl"

import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { trpc } from "@scandic-hotels/trpc/client"

import useLang from "../../../../hooks/useLang"
import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
import { mapRoomState } from "../../utils"
import { Room } from "../Room"
import { LinkedReservationCardSkeleton } from "./LinkedReservationCardSkeleton"
import Retry from "./Retry"

interface LinkedReservationProps {
  checkInTime: string
  checkOutTime: string
  refId: string
  roomIndex: number
}

export function LinkedReservation({
  checkInTime,
  checkOutTime,
  refId,
  roomIndex,
}: LinkedReservationProps) {
  const lang = useLang()
  const { data, refetch, isLoading } = trpc.booking.get.useQuery({
    refId,
    lang,
  })
  const {
    setRoom,
    setFormattedTotalCost,
    currencyCode,
    totalBookingPrice,
    totalBookingCheques,
  } = useBookingConfirmationStore((state) => ({
    setRoom: state.actions.setRoom,
    setFormattedTotalCost: state.actions.setFormattedTotalCost,
    currencyCode: state.currencyCode,
    totalBookingPrice: state.totalBookingPrice,
    totalBookingCheques: state.totalBookingCheques,
  }))
  const intl = useIntl()

  useEffect(() => {
    if (data?.room) {
      const roomData = mapRoomState(data.booking, data.room, intl)
      setRoom(roomData, roomIndex)

      const formattedTotalCost = totalBookingCheques
        ? formatPrice(
            intl,
            totalBookingCheques,
            CurrencyEnum.CC,
            totalBookingPrice,
            currencyCode
          )
        : formatPrice(
            intl,
            totalBookingPrice,
            currencyCode,
            undefined,
            undefined,
            roomData.pointsType
          )

      setFormattedTotalCost(formattedTotalCost)
    }
  }, [
    data,
    roomIndex,
    intl,
    setRoom,
    totalBookingCheques,
    totalBookingPrice,
    currencyCode,
    setFormattedTotalCost,
  ])

  if (isLoading) {
    return <LinkedReservationCardSkeleton />
  }

  if (!data?.room) {
    return <Retry handleRefetch={refetch} />
  }

  return (
    <Room
      booking={data.booking}
      checkInTime={checkInTime}
      checkOutTime={checkOutTime}
      img={data.room.images[0]}
      roomName={data.room.name}
    />
  )
}