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

import { colors, positivityColorV2 } from '../Colors'
import { sumDateData } from '../DateData'
import { TextStyles } from '../Styles'
import { ArtistStreamsSkeleton } from '../components/Skeleton'
import { useArtistStreams } from '../hooks/useArtistStreams'
import { useEntityStreamsSummary } from '../hooks/useEntityStreams'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import {
  formatCountShort,
  formatSignedPercent,
  timeRangeInterval,
} from '../util'

const PercentageText: React.FC<{
  percentage: number
  text: (x: string) => string
}> = ({ percentage, text }) => {
  const roundedPercentage = Math.round(percentage)
  const positivity =
    roundedPercentage === 0
      ? 'zero'
      : roundedPercentage > 0
      ? 'positive'
      : 'negative'
  const textColor = positivityColorV2[positivity].text

  return (
    <Text style={[TextStyles.body, { color: textColor }]}>
      {text(formatSignedPercent(roundedPercentage))}
    </Text>
  )
}

export const LibraryArtistStreams: React.FC<{
  timeInterval: TimeInterval
}> = ({ timeInterval }) => {
  const interval = timeRangeInterval(timeInterval)
  const useArtistStreamsForInterval = (interval: Interval) =>
    useArtistStreams(interval, 'all', 'worldwide')
  const { streams } = useArtistStreamsForInterval(interval)
  const summary = useEntityStreamsSummary(interval, useArtistStreamsForInterval)
  const streamsTotal = streams != null ? sumDateData(streams) : null
  const changePercentage = summary?.data?.changePercentage

  return streamsTotal != null ? (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        flexGrow: 1,
        paddingHorizontal: 6,
      }}
    >
      <Text style={[TextStyles.body, { color: colors.white }]}>
        {`${formatCountShort(streamsTotal)} ${Strings.Shared.TotalStreams}`}
      </Text>
      {changePercentage != null && (
        <PercentageText
          percentage={changePercentage}
          text={(percentageString) => percentageString}
        />
      )}
    </View>
  ) : (
    <ArtistStreamsSkeleton />
  )
}