import React from 'react'
import { NumericFormat } from 'react-number-format'

import { largeNumConversion } from '../../services/HelperServiceTyped'
import { cn } from '../../services/cn'

export const pillColorList = [
  'red',
  'blue',
  'green',
  'purple',
  'medium-purple',
  'dark-purple',
] as const
export type PillColorList = (typeof pillColorList)[number]

export type PillProps = {
  /** Available colors for the Pill */
  color: PillColorList
  /** The number to display inside the Pill */
  number: number
  /** Loading state for the Pill */
  loading?: boolean
  /** Optional prop to add a test id to the Pill for QA testing */
  qaTestId?: string
}

const pillColorVariants = {
  red: 'bg-dark-red text-white',
  blue: 'bg-dark-blue text-white',
  green: 'bg-medium-green text-dark-purple',
  purple: 'bg-purple text-white',
  'medium-purple': 'bg-medium-purple text-dark-purple',
  'dark-purple': 'bg-dark-purple text-white',
} as const

const Pill = ({
  color,
  number,
  loading,
  qaTestId = 'pill',
}: PillProps): React.JSX.Element => {
  const formattedNumber = largeNumConversion(number).val

  return (
    <div
      className={cn(
        'text-2xs flex w-max items-center rounded-full px-3 py-1 uppercase',
        pillColorVariants[color],
      )}
      data-testid='pill-component'
      data-color={color}
      qa-test-id={qaTestId}
    >
      {!loading ? (
        <NumericFormat
          value={formattedNumber}
          displayType='text'
          thousandSeparator
          suffix={largeNumConversion(number).suffix}
          decimalScale={2}
          data-testid='pill-number'
        />
      ) : (
        // Using this instead of `Mdash` because our `Mdash` component does not support the colors that `Pill` needs.
        <span data-testid='pill-loading'>&mdash;</span>
      )}
    </div>
  )
}

export default Pill