import { useIntl } from "react-intl"

import { RoomPrice } from "../../HotelCard/RoomPrice"
import { Typography } from "../../Typography"

import styles from "./hotelPointsRow.module.css"
import { PointType } from "@scandic-hotels/common/constants/pointType"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { getCurrencyText } from "../../currency-utils"

export type PointsRowProps = {
  pointsPerStay: number
  additionalPricePerStay?: number
  additionalPriceCurrency?: string
  pointsType: PointType | null
}
export function HotelPointsRow({
  pointsPerStay,
  additionalPricePerStay,
  additionalPriceCurrency,
  pointsType,
}: PointsRowProps) {
  const intl = useIntl()

  const currency = getCurrencyText(
    intl,
    CurrencyEnum.POINTS,
    pointsPerStay,
    pointsType
  )

  return (
    <RoomPrice
      className={styles.roomPrice}
      price={pointsPerStay}
      currency={currency}
      includePerNight={false}
    >
      {additionalPricePerStay ? (
        <>
          <Typography variant="Body/Paragraph/mdBold">
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <span> + </span>
          </Typography>
          <Typography variant="Title/Subtitle/md">
            <span>{additionalPricePerStay}</span>
          </Typography>
          <Typography variant="Body/Paragraph/mdBold">
            <span> {additionalPriceCurrency}</span>
          </Typography>
        </>
      ) : null}
    </RoomPrice>
  )
}