import { useIntl } from "react-intl"

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

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

import { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"

export default function PriceList({
  publicPrice = {},
  memberPrice = {},
}: PriceListProps) {
  const intl = useIntl()

  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
    publicPrice
  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
    memberPrice

  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice

  return (
    <dl className={styles.priceList}>
      <div className={styles.priceRow}>
        <dt>
          <Caption
            type="bold"
            color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
          >
            {intl.formatMessage({ id: "Standard price" })}
          </Caption>
        </dt>
        <dd>
          {publicLocalPrice ? (
            <div className={styles.price}>
              <Subtitle type="two" color="uiTextHighContrast">
                {publicLocalPrice.pricePerNight}
              </Subtitle>
              <Body color="uiTextHighContrast" textTransform="bold">
                {publicLocalPrice.currency}
              </Body>
            </div>
          ) : (
            <Subtitle type="two" color="disabled">
              {intl.formatMessage({ id: "n/a" })}
            </Subtitle>
          )}
        </dd>
      </div>

      <div className={styles.priceRow}>
        <dt>
          <Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
            {intl.formatMessage({ id: "Member price" })}
          </Caption>
        </dt>
        <dd>
          {memberLocalPrice ? (
            <div className={styles.price}>
              <Subtitle type="two" color="red">
                {memberLocalPrice.pricePerNight}
              </Subtitle>
              <Body color="red" textTransform="bold">
                {memberLocalPrice.currency}
              </Body>
            </div>
          ) : (
            <Body textTransform="bold" color="disabled">
              - {intl.formatMessage({ id: "Currency Code" })}
            </Body>
          )}
        </dd>
      </div>

      <div className={styles.priceRow}>
        <dt>
          <Caption
            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
          >
            {intl.formatMessage({ id: "Approx." })}
          </Caption>
        </dt>
        <dd>
          {showRequestedPrice ? (
            <Caption color="uiTextMediumContrast">
              {publicRequestedPrice.pricePerNight}/
              {memberRequestedPrice.pricePerNight}{" "}
              {publicRequestedPrice.currency}
            </Caption>
          ) : (
            <Caption color="disabled">- / - EUR</Caption>
          )}
        </dd>
      </div>
    </dl>
  )
}
