import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'

import { colors } from '../Colors'
import { StreamingDsp } from '../Consts'
import { useMarketTopTracks } from '../hooks/useMarketTopTracks'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import { Track } from '../types/Track'
import { productImageFieldsFromProduct } from '../types/graphqlCompatibilityHelpers'
import { isTrackExplicit, timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AutoLayout } from './AutoLayout'
import { DataTile, DataTileText } from './DataTile'
import { ProductImage } from './ProductImage'
import { EntityPositionListItem } from './listitems/EntityPositionListItem'

/**
 * 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

  const itemsToShow = 5

  const rowBottomBorder = {
    paddingBottom: 12,
    borderColor: colors.metals.metal0,
    borderBottomWidth: 1,
  }

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.TopTracks}
      subTitle={formatInterval(currentInterval)}
      error={error}
      style={[
        style,
        {
          minHeight: 340,
          // Remove excess padding for tile that doesn't have background
          paddingVertical: 0,
        },
      ]}
    >
      {topTracks.length === 0 ? (
        <DataTileText text={Strings.MarketsEmpty} />
      ) : (
        <AutoLayout gap={12}>
          {topTracks.slice(0, itemsToShow).flatMap(({ track, streams }, i) => (
            <View
              key={track.isrc}
              style={i === topTracks.length - 1 ? {} : rowBottomBorder}
            >
              <EntityPositionListItem
                image={
                  <ProductImage
                    product={productImageFieldsFromProduct(track.product)}
                    isExplicit={isTrackExplicit(track)}
                    style={{ marginRight: 18 }}
                  />
                }
                name={track.name}
                accessibilityLabel={`${i}-${track.name}`}
                isNew={false}
                streams={streams.currentPeriod}
                style={style}
                onPress={() => onPressTrack(track)}
              />
            </View>
          ))}
        </AutoLayout>
      )}
    </DataTile>
  )
}