import React from 'react'
import { Text, View } from 'react-native'
import { colors } from '../Colors'
import { Track } from '../types/Track'
import { TextStyles } from '../Styles'
import { formatCountShort } from '../util'
import { useSocial } from './useSocial'
import { Strings } from '../i18n'
import util from 'util'
import {
  careerStageFromSocialData,
  largestMilestoneByCareerStage,
} from '../career'
import { ReleaseToDateStreams } from '../types/types'
import { streamsForDsp } from './ReleaseToDateStreams'
import { TimeInterval } from '../types/TimeInterval'

export const MilestoneTile: React.FC<{
  track: Track
  releaseToDateStreams: ReleaseToDateStreams[]
  timeInterval: TimeInterval
}> = ({ track, releaseToDateStreams, timeInterval }) => {
  const socialInfo = useSocial('Milestone Tile', timeInterval)
  const socialData = socialInfo?.data
  if (!socialData) return null

  const careerStage = careerStageFromSocialData(socialData)

  const name = track?.name ?? ' '
  // Currently our milestones notifications only look at spotify streams
  // This is hella confusing in the UI, but notification consistency > user confusion for now
  const spotifyStreams = streamsForDsp(releaseToDateStreams, 'spotify')

  const largestMilestone = largestMilestoneByCareerStage(
    careerStage,
    spotifyStreams
  )

  if (largestMilestone === 0) return null

  const title = Strings.TrackScreen.MilestoneBannerTitle

  const content = util.format(
    Strings.TrackScreen.MilestoneBannerContent,
    name,
    formatCountShort(largestMilestone)
  )

  return (
    <View
      style={{
        marginTop: 28,
        marginBottom: -28,
        paddingHorizontal: 8,
      }}
    >
      <View
        style={{
          padding: 12,
          flexShrink: 1,
          borderRadius: 8,
          borderWidth: 2,
          backgroundColor: '#5047b450',
          borderColor: '#5047b4',
          flexDirection: 'row',
        }}
      >
        <View style={{ flex: 1 }}>
          <Text style={[TextStyles.micro, { color: `${colors.white}80` }]}>
            {title}
          </Text>

          <Text style={[TextStyles.tiny, { color: colors.white }]}>
            {content}
          </Text>
        </View>
      </View>
    </View>
  )
}