web/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx

"use client"

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

import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
import { Button } from "@scandic-hotels/design-system/Button"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"

import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
import useLang from "../../../hooks/useLang"
import { useEnterDetailsStore } from "../../../stores/enter-details"
import { RoomDetailsSidePeek } from "../../RoomDetailsSidePeek"

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

export default function SelectedRoom() {
  const intl = useIntl()
  const lang = useLang()
  const router = useRouter()
  const [isPending, startTransition] = useTransition()
  const { room, idx } = useRoomContext()
  const { hotelId, roomCategories, searchParamsStr } = useEnterDetailsStore(
    (state) => ({
      hotelId: state.booking.hotelId,
      roomCategories: state.roomCategories,
      searchParamsStr: state.searchParamString,
    })
  )

  function changeRoom() {
    const searchParams = new URLSearchParams(searchParamsStr)

    searchParams.set("activeRoomIndex", `${idx}`)
    startTransition(() => {
      router.push(`${selectRate(lang)}?${searchParams.toString()}`)
    })
  }

  const selectedRoom = getHotelRoom(roomCategories, room.roomTypeCode)

  return (
    <div className={styles.wrapper} data-available={room.isAvailable}>
      <div className={styles.main}>
        <div className={styles.headerContainer}>
          <Footnote
            className={styles.title}
            asChild
            textTransform="uppercase"
            type="label"
            color="uiTextHighContrast"
          >
            <h2>
              {intl.formatMessage({
                id: "common.room",
                defaultMessage: "Room",
              })}
            </h2>
          </Footnote>
          <Typography
            variant="Title/Subtitle/md"
            className={styles.description}
          >
            <p>
              {intl.formatMessage(
                {
                  id: "enterDetails.selectedRoom.roomType.description",
                  defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
                },
                {
                  roomType: room.roomType,
                  rateDescription: room.cancellationText,
                  rate: ([str]) => {
                    return str ? (
                      <span className={styles.rate}>{str}</span>
                    ) : null
                  },
                }
              )}
            </p>
          </Typography>
          <Button
            variant="Text"
            size="sm"
            onPress={changeRoom}
            isDisabled={isPending}
            wrapping={false}
          >
            <MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
            {intl.formatMessage({
              id: "common.change",
              defaultMessage: "Change",
            })}
          </Button>
        </div>
        {room.roomTypeCode && selectedRoom && (
          <div className={styles.details}>
            <RoomDetailsSidePeek
              hotelId={hotelId}
              roomTypeCode={room.roomTypeCode}
              room={selectedRoom}
              buttonVariant="primary"
              triggerLabel={intl.formatMessage({
                id: "hotel.seeRoomDetails",
                defaultMessage: "See room details",
              })}
              wrapping={false}
            />
          </div>
        )}
      </div>
    </div>
  )
}