import React from 'react'
import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native'
import { positivityColorV2 } from '../Colors'
import { TextStylesV2 } from '../Styles'
import { formatSignedPercent } from '../util'

const textStyles = StyleSheet.create({
  small: { ...TextStylesV2.tinyBold },
  large: { ...TextStylesV2.bodyBold },
})

/**
 * A signed percentage in a box colored based on positive/negative/zero value
 */
export const PercentPill: React.FC<{
  size?: 'small' | 'large'
  percentage: number
  showBackground?: boolean
  style?: StyleProp<ViewStyle>
}> = ({ size = 'large', percentage, showBackground = true, style }) => {
  const roundedPercentage = Math.round(percentage)
  const positivity =
    roundedPercentage === 0
      ? 'zero'
      : roundedPercentage > 0
      ? 'positive'
      : 'negative'
  const colors = positivityColorV2[positivity]
  const text = formatSignedPercent(roundedPercentage)
  return (
    <View
      style={[
        {
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          paddingVertical: 4,
          paddingHorizontal: 8,
          borderRadius: 4,
        },
        showBackground
          ? {
              backgroundColor: colors.background,
            }
          : null,
        style,
      ]}
    >
      <Text style={[textStyles[size], { color: colors.text }]}>
        <Text>{text}</Text>
      </Text>
    </View>
  )
}