web/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

"use client"

import { cx } from "class-variance-authority"
import { useParams } from "next/dist/client/components/navigation"
import { useRouter, useSearchParams } from "next/navigation"
import { memo } from "react"
import { useIntl } from "react-intl"

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

import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
import { useHotelsMapStore } from "@/stores/hotels-map"

import BookingCodeChip from "@/components/BookingCodeChip"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"

import ReadMore from "../ReadMore"
import TripAdvisorChip from "../TripAdvisorChip"
import HotelChequeCard from "./HotelChequeCard"
import HotelPointsRow from "./HotelPointsRow"
import HotelPriceCard from "./HotelPriceCard"
import HotelVoucherCard from "./HotelVoucherCard"
import NoPriceAvailableCard from "./NoPriceAvailableCard"
import { hotelCardVariants } from "./variants"

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

import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type { Lang } from "@/constants/languages"

function HotelCard({
  hotelData: { availability, hotel },
  isUserLoggedIn,
  state = "default",
  type = HotelCardListingTypeEnum.PageListing,
  bookingCode = "",
}: HotelCardProps) {
  const params = useParams()
  const searchParams = useSearchParams()

  const lang = params.lang as Lang
  const intl = useIntl()
  const { activate, engage, disengageAfterDelay } = useHotelsMapStore()

  const amenities = hotel.detailedFacilities.slice(0, 5)
  const router = useRouter()
  const classNames = hotelCardVariants({
    type,
    state,
  })

  const handleAddressClick = (event: React.MouseEvent) => {
    event.preventDefault()
    activate(hotel.name)
    router.push(`${selectHotelMap(lang)}?${searchParams.toString()}`)
  }

  const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
  const fullPrice = !availability.bookingCode
  const price = availability.productType

  const hasInsufficientPoints = !price?.redemptions?.some(
    (r) => r.hasEnoughPoints
  )
  const notEnoughPointsLabel = intl.formatMessage({
    defaultMessage: "Not enough points",
  })

  const isDisabled = price?.redemptions?.length && hasInsufficientPoints

  return (
    <article
      className={classNames}
      onMouseEnter={() => engage(hotel.name)}
      onMouseLeave={() => disengageAfterDelay()}
    >
      <div>
        <div className={styles.imageContainer}>
          <ImageGallery title={hotel.name} images={galleryImages} fill />
          {hotel.ratings?.tripAdvisor && (
            <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
          )}
        </div>
      </div>
      <div className={styles.hotelContent}>
        <section className={styles.hotelInformation}>
          <div className={styles.titleContainer}>
            <HotelLogoIcon
              hotelId={hotel.operaId}
              hotelType={hotel.hotelType}
            />
            <Subtitle textTransform="capitalize" color="uiTextHighContrast">
              {hotel.name}
            </Subtitle>
            <div className={styles.addressContainer}>
              <address className={styles.address}>
                {type == HotelCardListingTypeEnum.MapListing ? (
                  <Typography variant="Body/Supporting text (caption)/smRegular">
                    <p>{addressStr}</p>
                  </Typography>
                ) : (
                  <Link
                    size="small"
                    color="burgundy"
                    variant="underscored"
                    onClick={handleAddressClick}
                    href={selectHotelMap(lang)}
                    keepSearchParams
                    aria-label={intl.formatMessage({
                      defaultMessage: "See on map",
                    })}
                  >
                    <Typography variant="Body/Supporting text (caption)/smRegular">
                      <p>{addressStr}</p>
                    </Typography>
                  </Link>
                )}
              </address>

              <div>
                <Divider variant="vertical" color="subtle" />
              </div>
              <Caption color="uiTextPlaceholder">
                {intl.formatMessage(
                  {
                    defaultMessage: "{number} km to city center",
                  },
                  {
                    number: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </Caption>
            </div>
          </div>
          <Body className={styles.hotelDescription}>
            {hotel.hotelContent.texts.descriptions?.short}
          </Body>
          <div className={styles.facilities}>
            {amenities.map((facility) => {
              const Icon = (
                <FacilityToIcon id={facility.id} color="Icon/Default" />
              )
              return (
                <div className={styles.facilitiesItem} key={facility.id}>
                  {Icon && Icon}
                  <Caption color="uiTextMediumContrast">
                    {facility.name}
                  </Caption>
                </div>
              )
            })}
          </div>
          <ReadMore
            label={intl.formatMessage({
              defaultMessage: "See hotel details",
            })}
            hotelId={hotel.operaId}
            showCTA={true}
            sidePeekKey={SidePeekEnum.hotelDetails}
          />
        </section>
        <PricesWrapper
          href={`${selectRate(lang)}?hotel=${hotel.operaId}`}
          isClickable={availability.productType && !isDisabled}
        >
          {!availability.productType ? (
            <NoPriceAvailableCard />
          ) : (
            <>
              {bookingCode && (
                <BookingCodeChip
                  bookingCode={bookingCode}
                  isUnavailable={fullPrice}
                />
              )}
              {(!isUserLoggedIn ||
                !price?.member ||
                (bookingCode && !fullPrice)) &&
                price?.public && (
                  <HotelPriceCard
                    productTypePrices={price.public}
                    className={styles.priceCard}
                  />
                )}
              {availability.productType.member && (
                <HotelPriceCard
                  productTypePrices={availability.productType.member}
                  className={styles.priceCard}
                  isMemberPrice
                />
              )}
              {price?.voucher && (
                <HotelVoucherCard productTypeVoucher={price.voucher} />
              )}
              {price?.bonusCheque && (
                <HotelChequeCard productTypeCheque={price.bonusCheque} />
              )}
              {price?.redemptions?.length ? (
                <div className={styles.pointsCard}>
                  <Caption>
                    {intl.formatMessage({
                      defaultMessage: "Available rates",
                    })}
                  </Caption>
                  {price.redemptions.map((redemption) => (
                    <HotelPointsRow
                      key={redemption.rateCode}
                      pointsPerStay={redemption.localPrice.pointsPerStay}
                      additionalPricePerStay={
                        redemption.localPrice.additionalPricePerStay
                      }
                      additionalPriceCurrency={
                        redemption.localPrice.currency ?? undefined
                      }
                    />
                  ))}
                </div>
              ) : null}
              {isDisabled ? (
                <Tooltip
                  arrow="left"
                  position="bottom"
                  text={notEnoughPointsLabel}
                >
                  <div className={cx(styles.fakeButton, styles.disabled)}>
                    <Typography variant="Body/Paragraph/mdBold">
                      <span>{notEnoughPointsLabel}</span>
                    </Typography>
                  </div>
                </Tooltip>
              ) : (
                <div className={styles.fakeButton}>
                  <Typography variant="Body/Paragraph/mdBold">
                    <span>
                      {intl.formatMessage({
                        defaultMessage: "See rooms",
                      })}
                    </span>
                  </Typography>
                </div>
              )}
            </>
          )}
        </PricesWrapper>
      </div>
    </article>
  )
}

interface PricesWrapperProps {
  href: string
  isClickable?: boolean
  children: React.ReactNode
}
function PricesWrapper({ href, isClickable, children }: PricesWrapperProps) {
  const content = <div className={styles.prices}>{children}</div>

  return isClickable ? (
    <Link href={href} color="none" className={styles.link} keepSearchParams>
      {content}
    </Link>
  ) : (
    content
  )
}

export default memo(HotelCard)