web/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

"use client"
import { useSession } from "next-auth/react"
import { useState } from "react"
import { useIntl } from "react-intl"

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

import { selectRate } from "@/constants/routes/hotelReservation"

import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { isValidClientSession } from "@/utils/clientSession"

import HotelPointsRow from "../../HotelCard/HotelPointsRow"
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"

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

import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"

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 { data: session } = useSession()
  const isUserLoggedIn = isValidClientSession(session)
  const {
    bookingCode,
    name,
    publicPrice,
    memberPrice,
    currency,
    amenities,
    images,
    ratings,
    operaId,
    redemptionPrice,
    chequePrice,
    voucherPrice,
  } = data

  const firstImage = images[0]?.imageSizes?.small
  const altText = images[0]?.metaData?.altText

  return (
    <div className={styles.container}>
      <IconButton
        theme="Black"
        style="Muted"
        className={styles.closeButton}
        onPress={handleClose}
        aria-label={intl.formatMessage({
          defaultMessage: "Close",
        })}
      >
        <MaterialIcon icon="close" size={22} color="CurrentColor" />
      </IconButton>
      <div className={styles.content}>
        <div className={styles.header}>
          <HotelCardDialogImage
            firstImage={firstImage}
            altText={altText}
            rating={ratings}
            imageError={imageError}
            setImageError={setImageError}
            position="top"
          />
          <div>
            <div className={styles.name}>
              <Subtitle type="two">{name}</Subtitle>
            </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}>
              {redemptionPrice ? (
                <Caption color="uiTextHighContrast">
                  {intl.formatMessage({
                    defaultMessage: "Available rates",
                  })}
                </Caption>
              ) : (
                <Caption color="uiTextHighContrast">
                  {intl.formatMessage({
                    defaultMessage: "Per night from",
                  })}
                </Caption>
              )}
              <div className={styles.listingPrices}>
                {publicPrice && !isUserLoggedIn && memberPrice ? (
                  <>
                    <Subtitle type="two">
                      {publicPrice} {currency}
                    </Subtitle>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {memberPrice && <Caption>/</Caption>}
                  </>
                ) : (
                  bookingCode &&
                  publicPrice && (
                    <Subtitle type="two" color="red">
                      {publicPrice} {currency}
                    </Subtitle>
                  )
                )}
                {memberPrice && (
                  <Subtitle type="two" color="red">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: memberPrice,
                        currency,
                      }
                    )}
                  </Subtitle>
                )}
                {redemptionPrice && (
                  <HotelPointsRow pointsPerStay={redemptionPrice} />
                )}
                {chequePrice && (
                  <Subtitle type="two">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: chequePrice.numberOfCheques,
                        currency: "CC",
                      }
                    )}
                    {chequePrice.additionalPricePerStay > 0
                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                        " + " +
                        intl.formatMessage(
                          {
                            defaultMessage: "{price} {currency}",
                          },
                          {
                            price: chequePrice.additionalPricePerStay,
                            currency: chequePrice.currency,
                          }
                        )
                      : null}
                    <Typography variant="Body/Paragraph/mdRegular">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
                          defaultMessage: "night",
                        })}
                      </span>
                    </Typography>
                  </Subtitle>
                )}
                {voucherPrice && (
                  <Subtitle type="two">
                    {intl.formatMessage(
                      {
                        defaultMessage: "{price} {currency}",
                      },
                      {
                        price: voucherPrice,
                        currency,
                      }
                    )}
                    <Typography variant="Body/Paragraph/mdRegular">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
                        /
                        {intl.formatMessage({
                          defaultMessage: "night",
                        })}
                      </span>
                    </Typography>
                  </Subtitle>
                )}
              </div>
            </div>
            <Button asChild theme="base" size="small" className={styles.button}>
              <Link
                href={`${selectRate(lang)}?hotel=${operaId}`}
                color="none"
                keepSearchParams
              >
                {intl.formatMessage({
                  defaultMessage: "See rooms",
                })}
              </Link>
            </Button>
          </div>
        ) : (
          <NoPriceAvailableCard />
        )}
      </div>
    </div>
  )
}