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

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { getColorByChange } from '../util'
import { ChangePlusMinus } from './ChangePlusMinus'

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

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

  const roundedChangePercentage = Math.round(changePercentage ?? 0)
  const color = getColorByChange(roundedChangePercentage)

  return (
    <View style={styles.container}>
      <ChangePlusMinus change={roundedChangePercentage} />
      <Text style={[styles.text, { color }, textStyle]}>
        <Text>{Math.abs(roundedChangePercentage)}%</Text>
      </Text>
    </View>
  )
}