import React from 'react'
import { StyleSheet, Text } from 'react-native'

import { colors, positivityColorV2 } from '../Colors'
import { TextStyles } from '../Styles'
import { formatCount } from '../util'

const textStyles = StyleSheet.create({
  small: { ...TextStyles.tinyCaps },
  large: { ...TextStyles.bodyBold },
})

const signTextStyles = StyleSheet.create({
  small: { ...TextStyles.tinyBold },
  large: { ...TextStyles.bodyBold },
})

/**
 * Display a (signed) difference number or percentage
 */
export const DiffNumber: React.FC<{
  value: number
  type: 'total' | 'percentage'
  size: 'small' | 'large'
}> = ({ value, size, type }) => {
  const suffix = type === 'total' ? '' : '%'

  const [signColor, signString] =
    value === 0
      ? [positivityColorV2.zero.text, '']
      : value > 0
      ? [positivityColorV2.positive.text, '+ ']
      : [positivityColorV2.negative.text, '- ']

  const textColor = {
    total: colors.white,
    percentage: signColor,
  }

  const absoluteValue = Math.abs(value)

  return (
    <Text style={textStyles[size]}>
      <Text style={[signTextStyles[size], { color: signColor }]}>
        {signString}
      </Text>
      <Text style={{ color: textColor[type] }}>
        {formatCount(absoluteValue)}
        {suffix}
      </Text>
    </Text>
  )
}