import React from 'react'
import { Text, View } from 'react-native'
import { colorsV2 } from '../Colors'
import { sumDateData } from '../DateData'
import { StreamsByDateResult } from '../hooks/useEntityStreams'
import { Strings } from '../i18n'
import { TextStylesV2 } from '../Styles'
import { formatCount } from '../util'
import { parseDateString } from '../util/date'
import { EntityStreamsIntervalTableRowSkeleton } from './EntityStreamsIntervalTable'

/**
 *
 * View count information for an entity (video or track) for a set of intervals
 */
export const EntityReleaseToDateStreams: React.FC<{
  releaseDate: string
  useEntityStreams: (interval: Interval) => StreamsByDateResult
}> = ({ releaseDate, useEntityStreams }) => {
  const interval: Interval = {
    start: parseDateString(releaseDate),
    end: new Date(),
  }
  const { streams } = useEntityStreams(interval)
  const sum = streams != null ? sumDateData(streams) : null

  return sum != null ? (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        flex: 1,
      }}
    >
      <Text style={[TextStylesV2.tiny, { color: colorsV2.metals.metal0 }]}>
        {Strings.Shared.AllTime}
      </Text>
      <Text style={[TextStylesV2.h4, { color: colorsV2.white }]}>
        {formatCount(sum)}
      </Text>
    </View>
  ) : (
    <EntityStreamsIntervalTableRowSkeleton />
  )
}