import React from 'react'
import { StyleProp, View, ViewStyle, Text } from 'react-native'
import { colorsV2 } from '../Colors'
import { dspNames, StreamingDsp } from '../Consts'
import { useEntityStreamsSummary } from '../hooks/useEntityStreams'
import { useRegions } from '../hooks/useRegions'
import { useTrackCountryStreams } from '../hooks/useTrackCountryStreams'
import { useTrackTopCountries } from '../hooks/useTrackTopCountries'
import { localizedCountryName, Strings } from '../i18n'
import { TextStylesV2 } from '../Styles'
import { TimeInterval } from '../types/TimeInterval'
import { formatCountShort, notEmpty, timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AutoLayout } from './AutoLayout'
import { CountryIconAndName } from './CountryIconAndName'
import { DataTile, DataTileText } from './DataTile'
import { PercentPill } from './PercentPill'
import { SelectedMarketDivider } from './SelectedMarketDivider'

const CountryRow: React.FC<{
  countryCode: string
  dsp: StreamingDsp | 'all'
  currentInterval: Interval
  isrc: string
  style?: StyleProp<ViewStyle>
}> = ({ countryCode, isrc, currentInterval, dsp, style }) => {
  const { data, error } = useEntityStreamsSummary(
    currentInterval,
    (interval: Interval) =>
      useTrackCountryStreams(isrc, interval, countryCode, dsp)
  )
  const summary = data

  const { data: regionsData } = useRegions()
  const region = regionsData?.regions?.find(
    (region) => region.countryCode === countryCode
  )
  const countryName = region ? localizedCountryName(region) : null

  return summary && countryName ? (
    <View
      key={countryCode}
      style={[
        {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        },
        style,
      ]}
    >
      <CountryIconAndName
        countryCode={countryCode}
        countryName={countryName}
        style={{ flexShrink: 1 }}
      />
      <View
        style={{
          flexBasis: 100,
          flexDirection: 'row',
          justifyContent: 'flex-end',
          alignItems: 'center',
        }}
      >
        <Text style={[TextStylesV2.tinyBold, { color: colorsV2.white }]}>
          {formatCountShort(summary.currentIntervalStreamsSum)}
        </Text>
        <PercentPill
          percentage={summary.changePercentage}
          size="small"
          style={{ width: 54, marginStart: 8 }}
        />
      </View>
    </View>
  ) : null
}

/**
 * A tile representing the top countries (by streams) for a track and DSP
 */
export const TrackTopStreamingCountriesTile: React.FC<{
  isrc: string
  dsp: StreamingDsp | 'all'
  countryCode: string
  timeInterval: TimeInterval
  style?: StyleProp<ViewStyle>
}> = ({ isrc, dsp, countryCode, timeInterval, style }) => {
  const currentInterval = timeRangeInterval(timeInterval)

  const { data, error } = useTrackTopCountries(isrc, currentInterval, dsp)
  const countries = data?.countries
  const countriesForDsp = countries?.find((country) => country.dsp === dsp)
  const emptyText =
    dsp !== 'all'
      ? Strings.Shared.TrackNoTopCountriesForDsp.replace('%s', dspNames[dsp])
      : Strings.Shared.TrackNoTopCountriesForAllDsps

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.TopStreamingMarkets}
      subTitle={formatInterval(currentInterval)}
      style={[{ minHeight: 320 }, style]}
      error={error}
    >
      {countriesForDsp != null ? (
        countriesForDsp.streams.length > 0 ? (
          <AutoLayout gap={16}>
            {[
              ...countriesForDsp.streams.map((x) => (
                <CountryRow
                  key={x.item.countryCode}
                  countryCode={x.item.countryCode}
                  currentInterval={currentInterval}
                  dsp={dsp}
                  isrc={isrc}
                />
              )),
              ...(countryCode != 'worldwide'
                ? [
                    <SelectedMarketDivider key="selectedMarket" />,
                    <CountryRow
                      key={`selected-${countryCode}`}
                      countryCode={countryCode}
                      currentInterval={currentInterval}
                      dsp={dsp}
                      isrc={isrc}
                    />,
                  ]
                : []),
            ].filter(notEmpty)}
          </AutoLayout>
        ) : (
          <DataTileText text={emptyText} />
        )
      ) : null}
    </DataTile>
  )
}