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

const height = TextStyles.tiny.fontSize * 2

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: -60,

    height,
    justifyContent: 'space-evenly',
    backgroundColor: colors.darkGray,
    borderRadius: height / 2,
    marginBottom: height / 2,
    alignSelf: 'center',
    paddingHorizontal: TextStyles.tiny.fontSize,
    paddingBottom: 2,
  },
  legend: {
    ...TextStyles.micro,
    textAlign: 'center',
    textTransform: 'uppercase',
  },
  legendParticle: {
    color: colors.white,
  },
})

export const StreamsPerParticleIndicator: React.FC<{
  streamsPerParticle: number | null
}> = ({ streamsPerParticle }) => {
  const streamText = streamsPerParticle
    ? ` = ${formatCount(streamsPerParticle)} streams`
    : ' '

  return streamsPerParticle ? (
    <View style={styles.container}>
      <Text style={styles.legend}>
        <Text style={styles.legendParticle}>•</Text>
        {streamText}
      </Text>
    </View>
  ) : null
}