import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'
import { StreamingDsp } from '../Consts'
import { useMarketTopTracks } from '../hooks/useMarketTopTracks'
import { Strings } from '../i18n'
import { isExplicit } from '../tracks'
import { TrackAndStreams } from '../types/helpers'
import { TimeInterval } from '../types/TimeInterval'
import { Track } from '../types/Track'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AutoLayout } from './AutoLayout'
import { DataTile, DataTileText } from './DataTile'
import { EntityPositionListItem } from './EntityPositionListItem'
import { ProductImage } from './ProductImage'

export const TrackSummary: React.FC<{
  track: Track
  streams: number
  style?: StyleProp<ViewStyle>
  onPress: () => void
}> = ({ track, streams, style, onPress }) => (
  <EntityPositionListItem
    image={
      <ProductImage
        product={track.product}
        isExplicit={isExplicit(track)}
        style={{ marginRight: 18 }}
      />
    }
    name={track.name}
    showDetails={false}
    isNew={false}
    streams={streams}
    style={style}
    onPress={onPress}
  />
)

const TopTracks: React.FC<{
  topTracks: TrackAndStreams[]
  items?: number
  countryCode: string
  onPressTrack: (track: Track) => void
}> = ({ topTracks, items, countryCode, onPressTrack }) => {
  if (topTracks === null) return null
  if (topTracks.length === 0)
    return <DataTileText text={Strings.MarketsEmpty} />

  return (
    <AutoLayout gap={12}>
      {topTracks.slice(0, items).flatMap(({ track, streams }, i) => {
        const lastItem = i === (items ?? topTracks.length) - 1
        const bottomBorder = {
          paddingBottom: 12,
          borderColor: colorsV2.metals.metal0,
          borderBottomWidth: 1,
        }
        return (
          <View key={i} style={lastItem ? {} : bottomBorder}>
            <TrackSummary
              key={track.isrc}
              track={track}
              streams={streams.currentPeriod}
              onPress={() => onPressTrack(track)}
            />
          </View>
        )
      })}
    </AutoLayout>
  )
}

/**
 * Tile that lists top tracks for a given market and DSP, along with streams
 */
export const MarketTopTracksTile: React.FC<{
  dsp: StreamingDsp | 'all'
  countryCode: string
  timeInterval: TimeInterval
  style?: StyleProp<ViewStyle>
  onPressTrack: (track: Track) => void
}> = ({ countryCode, dsp, style, timeInterval, onPressTrack }) => {
  const currentInterval = timeRangeInterval(timeInterval)
  const { data, error } = useMarketTopTracks(countryCode, currentInterval, dsp)
  const topTracks = data?.tracks

  if (!topTracks) return null

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.TopTracks}
      subTitle={formatInterval(currentInterval)}
      error={error}
      style={[style, { minHeight: 340 }]}
    >
      <TopTracks
        topTracks={topTracks}
        onPressTrack={onPressTrack}
        countryCode={countryCode}
        items={5}
      />
    </DataTile>
  )
}