import React, { useContext } from 'react'
import { Text } from 'react-native'
import { colorsV2, positivityColorV2 } from '../Colors'
import { ArtistContext } from '../contexts/ArtistContext'
import { sumDateData } from '../DateData'
import { useArtistStreams } from '../hooks/useArtistStreams'
import { Strings } from '../i18n'
import { TextStylesV2 } from '../Styles'
import {
  formatCountShort,
  formatSignedPercent,
  timeRangeInterval,
} from '../util'
import { AutoLayout } from './AutoLayout'
import { useEntityStreamsSummary } from '../hooks/useEntityStreams'
import { timeIntervalOptions } from '../contexts/TimeIntervalContext'
import { ArtistStreamsSkeleton } from '../components/Skeleton'

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={[TextStylesV2.body, { color: textColor }]}>
      {text(formatSignedPercent(roundedPercentage))}
    </Text>
  )
}

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

  return (
    <AutoLayout gap={4} style={{ paddingVertical: 16 }}>
      <Text style={[TextStylesV2.bodyBold, { color: colorsV2.white }]}>
        {artist.name}
      </Text>
      {streamsTotal != null ? (
        <Text style={[TextStylesV2.body, { color: colorsV2.white }]}>
          {`${formatCountShort(streamsTotal)} ${Strings.Shared.TotalStreams}`}
        </Text>
      ) : (
        <ArtistStreamsSkeleton />
      )}
      {changePercentage != null ? (
        <PercentageText
          percentage={changePercentage}
          text={(percentageString) =>
            `${percentageString} ${
              timeIntervalOptions.find(({ value }) => value == timeInterval)
                ?.label
            }`
          }
        />
      ) : (
        <ArtistStreamsSkeleton />
      )}
    </AutoLayout>
  )
}