web/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx

"use client"

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

import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
import useLang from "../../hooks/useLang"

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

import type { HotelPin } from "../HotelCardDialogListing/utils"

interface ListingHotelCardProps {
  data: HotelPin
  handleClose: () => void
}

export default function ListingHotelCardDialog({
  data,
  handleClose,
}: ListingHotelCardProps) {
  const intl = useIntl()
  const lang = useLang()

  const [imageError, setImageError] = useState(false)

  const isUserLoggedIn = useIsLoggedIn()
  const {
    bookingCode,
    name,
    publicPrice,
    memberPrice,
    currency,
    amenities,
    images,
    ratings,
    operaId,
    redemptionPrice,
    pointsType,
    chequePrice,
    voucherPrice,
    hasEnoughPoints,
  } = data
  const imageSrc = images[0]?.src
  const altText = images[0]?.altText || images[0]?.altText_En

  const notEnoughPointsLabel = intl.formatMessage({
    id: "booking.notEnoughPoints",
    defaultMessage: "Not enough points",
  })
  const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
  const label = redemptionPrice
    ? intl.formatMessage({
        id: "hotelCard.availableRates",
        defaultMessage: "Available rates",
      })
    : chequePrice || voucherPrice
      ? intl.formatMessage({
          id: "common.from",
          defaultMessage: "From",
        })
      : intl.formatMessage({
          id: "listingHotelCardDialog.perNightFrom",
          defaultMessage: "Per night from",
        })

  return (
    <div className={styles.container}>
      <IconButton
        variant="Muted"
        emphasis
        className={styles.closeButton}
        onPress={handleClose}
        aria-label={intl.formatMessage({
          id: "common.close",
          defaultMessage: "Close",
        })}
        iconName="close"
      />
      <div className={styles.content}>
        <div className={styles.header}>
          <HotelCardDialogImage
            imageSrc={imageSrc}
            altText={altText}
            rating={{ tripAdvisor: ratings }}
            imageError={imageError}
            setImageError={setImageError}
            position="top"
          />
          <div>
            <div className={styles.name}>
              <Typography variant="Title/Subtitle/md">
                <p>{name}</p>
              </Typography>
            </div>
            <div className={styles.facilities}>
              {amenities.map((facility) => (
                <div key={facility.id}>
                  <FacilityToIcon
                    id={facility.id}
                    size={20}
                    color="Icon/Default"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>

        {publicPrice ||
        memberPrice ||
        redemptionPrice ||
        voucherPrice ||
        chequePrice ? (
          <div className={styles.bottomContainer}>
            <div className={styles.pricesContainer}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>{label}</p>
              </Typography>

              <div className={styles.listingPrices}>
                {publicPrice && !isUserLoggedIn ? (
                  <>
                    <Typography variant="Title/Subtitle/md">
                      <p>
                        {publicPrice} {currency}
                      </p>
                    </Typography>
                    {memberPrice && (
                      <Typography
                        variant="Body/Supporting text (caption)/smRegular"
                        className={styles.divider}
                      >
                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                        <p>/</p>
                      </Typography>
                    )}
                  </>
                ) : (
                  bookingCode &&
                  publicPrice && (
                    <Typography
                      variant="Title/Subtitle/md"
                      className={styles.red}
                    >
                      <p>
                        {publicPrice} {currency}
                      </p>
                    </Typography>
                  )
                )}
                {memberPrice && (
                  <Typography
                    variant="Title/Subtitle/md"
                    className={styles.red}
                  >
                    <p>
                      {intl.formatMessage(
                        {
                          id: "common.priceCurrency",
                          defaultMessage: "{price} {currency}",
                        },
                        {
                          price: memberPrice,
                          currency,
                        }
                      )}
                    </p>
                  </Typography>
                )}
                {redemptionPrice && (
                  <HotelPointsRow
                    pointsPerStay={redemptionPrice}
                    pointsType={pointsType}
                  />
                )}
                {chequePrice && (
                  <>
                    <Typography variant="Title/Subtitle/md">
                      <span>
                        {intl.formatMessage(
                          {
                            id: "common.priceCurrency",
                            defaultMessage: "{price} {currency}",
                          },
                          {
                            price: chequePrice.numberOfCheques,
                            currency: "CC",
                          }
                        )}
                        {chequePrice.additionalPricePerStay > 0
                          ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                            " + " +
                            intl.formatMessage(
                              {
                                id: "common.priceCurrency",
                                defaultMessage: "{price} {currency}",
                              },
                              {
                                price: chequePrice.additionalPricePerStay,
                                currency: chequePrice.currency,
                              }
                            )
                          : null}
                      </span>
                    </Typography>
                  </>
                )}
                {voucherPrice && (
                  <>
                    <Typography variant="Title/Subtitle/md">
                      <p>{formatPrice(intl, voucherPrice, currency)}</p>
                    </Typography>
                  </>
                )}
              </div>
            </div>
            {shouldShowNotEnoughPoints ? (
              <div className={styles.notEnoughPointsButton}>
                <Typography variant="Body/Paragraph/mdBold">
                  <span>{notEnoughPointsLabel}</span>
                </Typography>
              </div>
            ) : (
              <Button
                asChild
                theme="base"
                size="small"
                className={styles.button}
              >
                <Link
                  href={`${selectRate(lang)}?hotel=${operaId}`}
                  color="none"
                  keepSearchParams
                >
                  {intl.formatMessage({
                    id: "common.seeRooms",
                    defaultMessage: "See rooms",
                  })}
                </Link>
              </Button>
            )}
          </div>
        ) : (
          <NoPriceAvailableCard />
        )}
      </div>
    </div>
  )
}