import { Typography, TypographyProps } from '@tidbcloud/uikit'
import { MONOSPANCED_FONT_FAMILY } from '@tidbcloud/uikit/theme'
import React from 'react'

import { pointsFormatter, moneyFormatter } from 'dbaas/utils/numberFormat'

export const MoneyValue: React.FC<
  React.PropsWithChildren<
    {
      amount: number | string
      currency?: string
      active?: boolean
      isPoints?: boolean
      monospaced?: boolean
      negativeZero?: boolean
    } & TypographyProps
  >
> = ({ amount, currency, active = false, isPoints = false, monospaced = false, negativeZero = false, ...rest }) => {
  const num = Number(amount)

  if (amount === null || amount === '' || isNaN(num))
    return (
      <Typography className="value" {...rest}>
        -
      </Typography>
    )

  return (
    <Typography
      ff={monospaced ? MONOSPANCED_FONT_FAMILY : undefined}
      display="inline-block"
      c={active ? (num >= 0 ? 'green' : 'red') : undefined}
      sx={{ fontWeight: 'inherit' }}
      {...rest}
    >
      {isPoints ? pointsFormatter(num) : moneyFormatter(num, currency, negativeZero)}
    </Typography>
  )
}