import React from 'react'
import { Text, TouchableWithoutFeedback, View } from 'react-native'
import { colors, colorsV2 } from '../Colors'
import { sumDateData } from '../DateData'
import { useArtistStreams } from '../hooks/useArtistStreams'
import { useEntityStreamsSummary } from '../hooks/useEntityStreams'
import { TextStyles } from '../Styles'
import { CountryCard } from '../types/CountryCard'
import { TimeInterval } from '../types/TimeInterval'
import {
  formatCountryName,
  formatCountShortSeparate,
  timeRangeInterval,
} from '../util'
import { BarChart } from './BarChart'
import { ChangePlusMinusAndPercent } from './ChangePlusMinusAndPercent'
import { ListItemRank } from './ListItemRank'

export const CarouselCountry: React.FC<{
  index: number
  item: CountryCard
  onPressItem?: (item: CountryCard) => void
  timeInterval: TimeInterval
}> = ({ index, item, onPressItem, timeInterval }) => {
  const { countryCode, name } = item

  const interval = timeRangeInterval(timeInterval)
  const summary = useEntityStreamsSummary(interval, (interval) =>
    useArtistStreams(interval, 'all', countryCode)
  )
  const changePercent = summary?.data?.changePercentage
  const streams = summary?.data?.currentIntervalStreams
  const formattedStreamsSum =
    streams != null ? formatCountShortSeparate(sumDateData(streams)) : null

  return (
    <View style={{ flex: 1, paddingHorizontal: 24 }} key={index}>
      <TouchableWithoutFeedback
        onPress={() => onPressItem && onPressItem(item)}
      >
        {/** Container */}
        <View style={{ flex: 1 }}>
          {/** Country: Name Row */}
          <View style={{ flexDirection: 'row' }}>
            <ListItemRank index={index} />

            {/** Rank Component: Name Row */}
            <Text
              style={[
                TextStyles.body,
                {
                  color: colors.white,
                  marginVertical: 8,
                  flex: 1,
                  textTransform: 'capitalize',
                },
              ]}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {formatCountryName(name)}
            </Text>
            {changePercent != null && (
              <ChangePlusMinusAndPercent changePercentage={changePercent} />
            )}
          </View>

          {/** Country: Graph & Big Number Row */}
          <View style={{ flexDirection: 'row' }}>
            {/** Bar Chart */}
            {streams != null ? (
              <BarChart
                data={streams}
                style={{
                  flex: 3,
                  height: 45,
                  alignSelf: 'center',
                }}
                valueExtractor={(item) => item.data}
                statusExtractor={(item) =>
                  item.data != null ? 'full' : 'missing'
                }
                barWidth="auto"
                rangeMin={0}
                barStyle={{ fill: colorsV2.metals.metal2 }}
              />
            ) : null}
            {/** Big Number */}
            <View
              style={{
                flex: 4,
                alignItems: 'flex-end',
              }}
            >
              {formattedStreamsSum != null ? (
                <Text style={[TextStyles.h2, { color: colors.white }]}>
                  {formattedStreamsSum.number}
                  <Text
                    style={{
                      ...TextStyles.bodyHeader,
                      color: colors.white,
                      textTransform: 'uppercase',
                    }}
                  >
                    {formattedStreamsSum.postfix}
                  </Text>
                </Text>
              ) : null}
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </View>
  )
}