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

import { colors } from '../Colors'
import { formatCount } from '../util'
import { ChangePlusMinus } from './ChangePlusMinus'

const styles = StyleSheet.create({
  container: { flexDirection: 'row', alignItems: 'center' },
  text: {
    color: colors.midWhite,
    marginLeft: 5,
    marginBottom: 3,
  },
})

export const ChangePlusMinusAndNumber: React.FC<{
  changeNumber?: number
  textStyle?: StyleProp<TextStyle>
}> = ({ changeNumber, textStyle }) => {
  if (changeNumber === null)
    return (
      <View style={styles.container}>
        <ChangePlusMinus />
      </View>
    )

  return (
    <View style={styles.container}>
      <ChangePlusMinus change={changeNumber} />
      <Text style={[styles.text, textStyle]}>
        <Text>{formatCount(Math.abs(changeNumber ?? 0))}</Text>
      </Text>
    </View>
  )
}