import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { awardPointsVariants } from "./awardPointsVariants"

import type { AwardPointsVariantProps } from "@/types/components/myPages/myPage/earnAndBurn"

export default function AwardPoints({
  awardPoints,
  isCalculated,
  isExpiringPoints = false,
}: {
  awardPoints: number
  isCalculated: boolean
  isExpiringPoints?: boolean
}) {
  let variant: AwardPointsVariantProps["variant"] = null
  const intl = useIntl()

  if (isCalculated && !isExpiringPoints) {
    if (awardPoints > 0) {
      variant = "addition"
    } else if (awardPoints < 0) {
      variant = "negation"
      awardPoints = Math.abs(awardPoints)
    }
  }
  const classNames = awardPointsVariants({
    variant,
  })

  return (
    <Typography variant="Body/Paragraph/mdBold" className={classNames}>
      <span>
        {isCalculated
          ? intl.formatNumber(awardPoints)
          : intl.formatMessage({
              id: "earnAndBurn.awardPoints.pointsBeingCalculated",
              defaultMessage: "Points being calculated",
            })}
      </span>
    </Typography>
  )
}