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

import { Divider } from "@scandic-hotels/design-system/Divider"
import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"

export default function HotelPriceCard({
  productTypePrices,
  isMemberPrice = false,
  className,
}: 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>
              <Caption color="red">
                {intl.formatMessage({
                  defaultMessage: "Member price",
                })}
              </Caption>
            </dt>
          </div>
        ) : (
          <div className={styles.priceRow}>
            <dt>
              <Caption color="uiTextHighContrast">
                {intl.formatMessage({
                  defaultMessage: "Standard price",
                })}
              </Caption>
            </dt>
          </div>
        ))}
      <div className={styles.priceRow}>
        <dt>
          <Caption
            type="bold"
            color={isMemberPrice ? "red" : "uiTextHighContrast"}
          >
            {intl.formatMessage({
              defaultMessage: "From",
            })}
          </Caption>
        </dt>
        <dd>
          <div className={styles.price}>
            <Subtitle
              type="two"
              color={isMemberPrice ? "red" : "uiTextHighContrast"}
            >
              {productTypePrices.localPrice.pricePerNight}
            </Subtitle>
            <Body
              color={isMemberPrice ? "red" : "uiTextHighContrast"}
              textTransform="bold"
            >
              {productTypePrices.localPrice.currency}
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              <span className={styles.perNight}>
                /
                {intl.formatMessage({
                  defaultMessage: "night",
                })}
              </span>
            </Body>
          </div>
        </dd>
      </div>
      {productTypePrices?.requestedPrice && (
        <div className={styles.priceRow}>
          <dt>
            <Caption color="uiTextMediumContrast">
              {intl.formatMessage({
                defaultMessage: "Approx.",
              })}
            </Caption>
          </dt>
          <dd>
            <Caption color={"uiTextMediumContrast"}>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {`${productTypePrices.requestedPrice.pricePerNight} `}
              {productTypePrices.requestedPrice.currency}
            </Caption>
          </dd>
        </div>
      )}
      {productTypePrices.localPrice.pricePerStay !==
        productTypePrices.localPrice.pricePerNight &&
        // Handle undefined scenarios
        productTypePrices.localPrice.pricePerNight && (
          <>
            <Divider className={styles.divider} />
            <div className={styles.priceRow}>
              <dt>
                <Caption color="uiTextMediumContrast">
                  {intl.formatMessage({
                    defaultMessage: "Total",
                  })}
                </Caption>
              </dt>
              <dd>
                <Caption color={"uiTextMediumContrast"}>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${productTypePrices.localPrice.pricePerStay} `}
                  {productTypePrices.localPrice.currency}
                </Caption>
              </dd>
            </div>
          </>
        )}
    </dl>
  )
}
