web/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

"use client"

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

import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

import { selectRate } from "@/constants/routes/hotelReservation"
import { useEnterDetailsStore } from "@/stores/enter-details"

import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"

import ToggleSidePeek from "./ToggleSidePeek"

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, searchParamsStr } = useEnterDetailsStore((state) => ({
    hotelId: state.booking.hotelId,
    searchParamsStr: state.searchParamString,
  }))

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

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

  return (
    <div className={styles.wrapper} data-available={room.isAvailable}>
      <div className={styles.iconWrapper}>
        <div className={styles.circle}>
          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
        </div>
      </div>
      <div className={styles.main}>
        <div className={styles.headerContainer}>
          <Footnote
            className={styles.title}
            asChild
            textTransform="uppercase"
            type="label"
            color="uiTextHighContrast"
          >
            <h2>{intl.formatMessage({ id: "Your room" })}</h2>
          </Footnote>
          <Subtitle
            type="two"
            className={styles.description}
            color="uiTextHighContrast"
          >
            {intl.formatMessage(
              { id: "{roomType} <rate>{rateDescription}</rate>" },
              {
                roomType: room.roomType,
                rateDescription: room.cancellationText,
                rate: (str) => {
                  return <span className={styles.rate}>{str}</span>
                },
              }
            )}
          </Subtitle>
          <Button
            variant="icon"
            intent="text"
            size="small"
            onClick={changeRoom}
            disabled={isPending}
          >
            <MaterialIcon icon="edit_square" color="CurrentColor" />
            <Caption color="burgundy" type="bold">
              {intl.formatMessage({ id: "Change room" })}
            </Caption>
          </Button>
        </div>
        {room.roomTypeCode && (
          <div className={styles.details}>
            <ToggleSidePeek
              hotelId={hotelId}
              intent="text"
              roomTypeCode={room.roomTypeCode}
            />
          </div>
        )}
      </div>
    </div>
  )
}