web/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

"use client"

import { createElement, useCallback } from "react"
import { useIntl } from "react-intl"

import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import { ErrorCircleIcon } from "@/components/Icons"
import ImageGallery from "@/components/ImageGallery"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import { getIconForFeatureCode } from "../../utils"
import { cardVariants } from "./cardVariants"

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

import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
import { HotelTypeEnum } from "@/types/enums/hotelType"
import type { RateDefinition } from "@/server/routers/hotels/output"

export default function RoomCard({
  hotelId,
  hotelType,
  rateDefinitions,
  roomConfiguration,
  roomCategories,
  selectedPackages,
  packages,
  handleSelectRate,
}: RoomCardProps) {
  const intl = useIntl()

  const rates = {
    saveRate: rateDefinitions.find(
      (rate) => rate.cancellationRule === "NotCancellable"
    ),
    changeRate: rateDefinitions.find(
      (rate) => rate.cancellationRule === "Changeable"
    ),
    flexRate: rateDefinitions.find(
      (rate) => rate.cancellationRule === "CancellableBefore6PM"
    ),
  }

  function findProductForRate(rate: RateDefinition | undefined) {
    return rate
      ? roomConfiguration.products.find(
          (product) =>
            product.productType.public?.rateCode === rate.rateCode ||
            product.productType.member?.rateCode === rate.rateCode
        )
      : undefined
  }

  function getRateDefinitionForRate(rate: RateDefinition | undefined) {
    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
  }

  const getBreakfastMessage = (rate: RateDefinition | undefined) => {
    if (hotelType === HotelTypeEnum.ScandicGo) {
      return intl.formatMessage({
        id: "Breakfast deal can be purchased at the hotel.",
      })
    }
    return getRateDefinitionForRate(rate)?.breakfastIncluded
      ? intl.formatMessage({ id: "Breakfast is included." })
      : intl.formatMessage({ id: "Breakfast selection in next step." })
  }

  const petRoomPackage =
    (selectedPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
      packages?.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
    undefined

  const selectedRoom = roomCategories.find((roomCategory) =>
    roomCategory.roomTypes.some(
      (roomType) => roomType.code === roomConfiguration.roomTypeCode
    )
  )

  const { name, roomSize, occupancy, images } = selectedRoom || {}

  const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
  const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
  const freeBooking = intl.formatMessage({ id: "Free rebooking" })
  const payLater = intl.formatMessage({ id: "Pay later" })
  const payNow = intl.formatMessage({ id: "Pay now" })

  const rateKey = useCallback(
    (key: string) => {
      switch (key) {
        case "flexRate":
          return freeCancelation
        case "saveRate":
          return nonRefundable
        default:
          return freeBooking
      }
    },
    [freeCancelation, freeBooking, nonRefundable]
  )

  const classNames = cardVariants({
    availability:
      roomConfiguration.status === "NotAvailable"
        ? "noAvailability"
        : "default",
  })

  return (
    <div className={classNames}>
      <div>
        <div className={styles.imageContainer}>
          <div className={styles.chipContainer}>
            {roomConfiguration.roomsLeft > 0 &&
              roomConfiguration.roomsLeft < 5 && (
                <span className={styles.chip}>
                  <Footnote
                    color="burgundy"
                    textTransform="uppercase"
                  >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
                </span>
              )}
            {roomConfiguration.features
              .filter((feature) => selectedPackages.includes(feature.code))
              .map((feature) => (
                <span className={styles.chip} key={feature.code}>
                  {createElement(getIconForFeatureCode(feature.code), {
                    width: 16,
                    height: 16,
                    color: "burgundy",
                  })}
                </span>
              ))}
          </div>
          {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
          <ImageGallery
            images={images}
            title={roomConfiguration.roomType}
            fill
          />
        </div>

        <div className={styles.specification}>
          {occupancy && (
            <Caption color="uiTextMediumContrast" className={styles.guests}>
              {intl.formatMessage(
                {
                  id: "booking.guests",
                },
                { nrOfGuests: occupancy?.total }
              )}
            </Caption>
          )}
          {roomSize && (
            <Caption color="uiTextMediumContrast">
              {roomSize.min === roomSize.max
                ? roomSize.min
                : `${roomSize.min}-${roomSize.max}`}
              m²
            </Caption>
          )}
          <div className={styles.toggleSidePeek}>
            {roomConfiguration.roomTypeCode && (
              <ToggleSidePeek
                hotelId={hotelId}
                roomTypeCode={roomConfiguration.roomTypeCode}
              />
            )}
          </div>
        </div>
        <div className={styles.roomDetails}>
          <Subtitle className={styles.name} type="two">
            {name}
          </Subtitle>
          {/* Out of scope for now
            <Body>{descriptions?.short}</Body>
            */}
        </div>
      </div>
      <div className={styles.container}>
        <Caption color="uiTextHighContrast" type="bold">
          {getBreakfastMessage(rates.flexRate)}
        </Caption>
        {roomConfiguration.status === "NotAvailable" ? (
          <div className={styles.noRoomsContainer}>
            <div className={styles.noRooms}>
              <ErrorCircleIcon color="red" width={16} />
              <Caption color="uiTextHighContrast" type="bold">
                {intl.formatMessage({
                  id: "This room is not available",
                })}
              </Caption>
            </div>
          </div>
        ) : (
          <div className={styles.flexibilityOptions}>
            {Object.entries(rates).map(([key, rate]) => (
              <FlexibilityOption
                key={key}
                name={rateKey(key)}
                value={key.toLowerCase()}
                paymentTerm={key === "flexRate" ? payLater : payNow}
                product={findProductForRate(rate)}
                priceInformation={getRateDefinitionForRate(rate)?.generalTerms}
                handleSelectRate={handleSelectRate}
                roomTypeCode={roomConfiguration.roomTypeCode}
                petRoomPackage={petRoomPackage}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}