import React from 'react'
import { Text, View, StyleSheet } from 'react-native'
import { colors } from '../Colors'
import { TextStyles, Figures } from '../Styles'
import { formatCountShort } from '../util'
import { ChangePlusMinusAndPercent } from './ChangePlusMinusAndPercent'

interface ListItemInfoStreamsWithChangeProps {
  currentPeriod?: number
  changePercentage?: number
}

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  spaceBetween: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  inlineBlock: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  streamsIcon: {
    marginTop: 2,
    marginRight: 8,
  },
  streamsNumber: {
    ...TextStyles.tiny,
    color: colors.mutedBrightMetal,
    textTransform: 'uppercase',
  },
  ...Figures,
})

export const ListItemInfoStreamsWithChange: React.FC<
  ListItemInfoStreamsWithChangeProps
> = ({ currentPeriod, changePercentage }) => {
  return (
    <View style={changePercentage ? Styles.spaceBetween : Styles.container}>
      {currentPeriod ? (
        <Text style={Styles.streamsNumber}>
          {formatCountShort(currentPeriod)}
        </Text>
      ) : null}
      {changePercentage ? (
        <ChangePlusMinusAndPercent changePercentage={changePercentage} />
      ) : (
        <View />
      )}
    </View>
  )
}