import React from 'react'
import { View, Text, ViewStyle, StyleProp } from 'react-native'
import { ChangeArrow } from './ChangeArrow'
import { colors } from '../Colors'
import { TextStyles } from '../Styles'

export const PositionChangeAndArrow: React.FC<{
  currentValue: number
  previousValue: number
  invertDirection?: boolean // This is used in the case where a smaller value is considered "higher" than a larger value
  style?: StyleProp<ViewStyle>
}> = ({ currentValue, previousValue, invertDirection, style }) => {
  const positionChange = invertDirection
    ? previousValue - currentValue
    : currentValue - previousValue
  const color = positionChange < 0 ? colors.brightRose : colors.green

  return (
    <View style={style}>
      {positionChange === 0 ? null : (
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <ChangeArrow change={positionChange} />
          <Text style={[TextStyles.body, { color, marginLeft: 4 }]}>
            {Math.abs(positionChange)}
          </Text>
        </View>
      )}
    </View>
  )
}