import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

import { Divider } from "../../Divider"
import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
import { Typography } from "../../Typography"
import styles from "./hotelPriceCard.module.css"

type Price = {
  pricePerStay: number
  pricePerNight: number
  currency: string
}

export type PriceCardProps = {
  productTypePrices: {
    rateType: RateTypeEnum
    localPrice: Price
    requestedPrice?: Price
  }
  isMemberPrice?: boolean
  className?: string
  isCampaign?: boolean
  isPartnerBrand: boolean
}

export function HotelPriceCard({
  productTypePrices,
  isMemberPrice = false,
  className,
  isCampaign = false,
  isPartnerBrand,
}: PriceCardProps) {
  const intl = useIntl()
  const isRegularOrPublicPromotionRate =
    productTypePrices.rateType === RateTypeEnum.Regular ||
    productTypePrices.rateType === RateTypeEnum.PublicPromotion

  return (
    <dl className={cx(styles.priceCard, className)}>
      {isRegularOrPublicPromotionRate &&
        (isMemberPrice ? (
          <div className={styles.priceRow}>
            <dt>
              <Typography
                variant="Body/Supporting text (caption)/smRegular"
                className={styles.redColor}
              >
                <p>
                  {isPartnerBrand
                    ? intl.formatMessage({
                        id: "booking.scandicFriendsMemberPrice",
                        defaultMessage: "Scandic Friends member price",
                        description: {
                          context:
                            "Member price label in white label partner sites",
                        },
                      })
                    : intl.formatMessage({
                        id: "booking.memberPrice",
                        defaultMessage: "Member price",
                      })}
                </p>
              </Typography>
            </dt>
          </div>
        ) : (
          <div className={styles.priceRow}>
            <dt>
              <Typography
                variant="Body/Supporting text (caption)/smRegular"
                className={styles.defaultColor}
              >
                <p>
                  {intl.formatMessage({
                    id: "booking.standardPrice",
                    defaultMessage: "Standard price",
                  })}
                </p>
              </Typography>
            </dt>
          </div>
        ))}
      <div className={styles.priceRow}>
        <dt>
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={isMemberPrice ? styles.redColor : styles.defaultColor}
          >
            <p>
              {intl.formatMessage({
                id: "common.from",
                defaultMessage: "From",
              })}
            </p>
          </Typography>
        </dt>
        <dd>
          <div className={styles.price}>
            <Typography
              variant="Title/Subtitle/md"
              className={
                isMemberPrice || isCampaign
                  ? styles.redColor
                  : styles.defaultColor
              }
            >
              <p> {productTypePrices.localPrice.pricePerNight}</p>
            </Typography>
            <Typography
              variant="Body/Paragraph/mdBold"
              className={
                isMemberPrice || isCampaign
                  ? styles.redColor
                  : styles.defaultColor
              }
            >
              <p>
                {productTypePrices.localPrice.currency}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span className={styles.perNight}>
                  /
                  {intl.formatMessage({
                    id: "common.night",
                    defaultMessage: "night",
                  })}
                </span>
              </p>
            </Typography>
          </div>
        </dd>
      </div>
      {productTypePrices?.requestedPrice && (
        <div className={styles.priceRow}>
          <dt>
            <Typography
              variant="Body/Supporting text (caption)/smRegular"
              className={styles.secondaryColor}
            >
              <p>
                {intl.formatMessage({
                  id: "booking.approx",
                  defaultMessage: "Approx.",
                })}
              </p>
            </Typography>
          </dt>
          <dd>
            <Typography
              variant="Body/Supporting text (caption)/smRegular"
              className={styles.secondaryColor}
            >
              <p>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {`${productTypePrices.requestedPrice.pricePerNight} `}
                {productTypePrices.requestedPrice.currency}
              </p>
            </Typography>
          </dd>
        </div>
      )}
      {productTypePrices.localPrice.pricePerStay !==
        productTypePrices.localPrice.pricePerNight &&
        // Handle undefined scenarios
        productTypePrices.localPrice.pricePerNight && (
          <>
            <Divider className={styles.divider} />
            <div className={styles.priceRow}>
              <dt>
                <Typography
                  variant="Body/Supporting text (caption)/smRegular"
                  className={styles.secondaryColor}
                >
                  <p>
                    {intl.formatMessage({
                      id: "common.total",
                      defaultMessage: "Total",
                    })}
                  </p>
                </Typography>
              </dt>
              <dd>
                <Typography
                  variant="Body/Supporting text (caption)/smRegular"
                  className={styles.secondaryColor}
                >
                  <p>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${productTypePrices.localPrice.pricePerStay} `}
                    {productTypePrices.localPrice.currency}
                  </p>
                </Typography>
              </dd>
            </div>
          </>
        )}
    </dl>
  )
}