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

import { formatCountShort } from '../util'
import { mergeReleaseToDateStreams } from '../streams'
import { Styles, TextStyles } from '../Styles'
import { colors } from '../Colors'
import { ReleaseToDateStreams as RTDStreams, DspSlug } from '../types/types'
import { Strings } from '../i18n'

type Props = {
  releaseToDateStreams?: RTDStreams[]
  dsp: DspSlug
}

export function streamsForDsp(
  releaseToDateStreams: RTDStreams[],
  dsp: DspSlug
): number | null {
  if (!releaseToDateStreams) return null

  const releaseToDateStreamsForDsp = mergeReleaseToDateStreams(
    releaseToDateStreams
  ).find((s) => s.dsp === dsp)

  if (!releaseToDateStreamsForDsp) return null

  return releaseToDateStreamsForDsp.streams
}

export function ReleaseToDateStreams({ releaseToDateStreams, dsp }: Props) {
  const streams = streamsForDsp(releaseToDateStreams, dsp)
  if (streams === null) return null

  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingVertical: 12,
        borderTopColor: colors.midGray,
        borderTopWidth: 1,
        ...Styles.screenHorizontalPaddingWithNegation,
      }}
    >
      <Text
        style={[
          TextStyles.tiny,
          { color: colors.lightGray, textTransform: 'capitalize' },
        ]}
      >
        {dsp !== 'all' ? `${dsp} ` : ''}
        {Strings.Shared.AllTimeStreams}
      </Text>
      <Text style={[TextStyles.tiny, { color: colors.white }]}>
        {formatCountShort(streams)}
      </Text>
    </View>
  )
}