import { useIntl } from 'react-intl'

import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
import Caption from '../../Caption'
import Subtitle from '../../Subtitle'

import styles from './hotelChequeCard.module.css'

type ProductTypeCheque = {
  localPrice: {
    numberOfCheques: number
    additionalPricePerStay: number
    currency: CurrencyEnum | null | undefined
  }
  requestedPrice?: {
    numberOfCheques: number
    additionalPricePerStay: number
    currency: CurrencyEnum | null | undefined
  }
}

export default function HotelChequeCard({
  productTypeCheque,
}: {
  productTypeCheque: ProductTypeCheque
}) {
  const intl = useIntl()
  return (
    <div className={styles.chequeCard}>
      <div className={styles.chequeRow}>
        <Caption>
          {intl.formatMessage({
            id: 'common.from',
            defaultMessage: 'From',
          })}
        </Caption>
        <div className={styles.cheque}>
          <Subtitle type="two" color="uiTextHighContrast">
            {productTypeCheque.localPrice.numberOfCheques}
          </Subtitle>
          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <>
              +
              <Subtitle type="two" color="uiTextHighContrast">
                {productTypeCheque.localPrice.additionalPricePerStay}
              </Subtitle>
              <Caption color="uiTextHighContrast">
                {productTypeCheque.localPrice.currency}
              </Caption>
            </>
          ) : null}
        </div>
      </div>
      {productTypeCheque.requestedPrice &&
      productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
        <div className={styles.chequeRow}>
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage({
              id: 'booking.approx',
              defaultMessage: 'Approx.',
            })}
          </Caption>
          <Caption color="uiTextMediumContrast">
            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
            {productTypeCheque.requestedPrice.additionalPricePerStay
              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                ' + '
              : ''}
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
          </Caption>
        </div>
      ) : null}
    </div>
  )
}