import { useIntl } from "react-intl"

import { Lang } from "@/constants/languages"

import { awardPointsVariants } from "./awardPointsVariants"

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

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

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

  // sv hardcoded to force space on thousands
  const formatter = new Intl.NumberFormat(Lang.sv)
  return (
    <td className={classNames}>
      {isCalculated
        ? formatter.format(awardPoints)
        : intl.formatMessage({ id: "Points being calculated" })}
    </td>
  )
}
