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

import { colors } from '../Colors'
import { DateData, sumDateData } from '../DateData'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'
import { formatCount } from '../util'
import { EntityStreamsIntervalTableRowSkeleton } from './EntityStreamsIntervalTable'

/**
 *
 * View count information for an entity (video or track) for a set of intervals
 */
export const EntityReleaseToDateStreams: React.FC<{
  streams?: DateData<number | null>[]
}> = ({ streams }) => {
  const sum = streams != null ? sumDateData(streams) : null
  return sum != null ? (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        flex: 1,
      }}
    >
      <Text style={[TextStyles.tiny, { color: colors.metals.metal0 }]}>
        {Strings.Shared.AllTime}
      </Text>
      <Text style={[TextStyles.h4, { color: colors.white }]}>
        {formatCount(sum)}
      </Text>
    </View>
  ) : (
    <EntityStreamsIntervalTableRowSkeleton />
  )
}