import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { dspTitleProps } from '../charts'
import { ChartDsp } from '../Consts'
import { useMarketChartTrackPositions } from '../hooks/useMarketChartTrackPositions'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import { formatDate, timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { DataTile, DataTileText } from './DataTile'
import { useTrack } from '../hooks/useTrack'
import { ProductImage } from './ProductImage'
import { ChartTrackPosition } from '../types/types'
import { isExplicit } from '../tracks'
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler'
import { TextStylesV2 } from '../Styles'
import { colorsV2 } from '../Colors'
import { AutoLayout } from './AutoLayout'
import NoData from '../icons/NoData'

export const MarketChartTrackPositionItem: React.FC<{
  chartTrackPosition: ChartTrackPosition
  onPress?: () => void
  style?: StyleProp<ViewStyle>
}> = ({ chartTrackPosition, onPress, style }) => {
  const track =
    chartTrackPosition.isrc != null
      ? useTrack(chartTrackPosition.isrc)?.data
      : null

  return track != null ? (
    <TouchableOpacity
      onPress={onPress}
      style={style}
      disabled={onPress == null}
    >
      <View
        style={[
          {
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          },
        ]}
      >
        <View
          style={[
            {
              flexDirection: 'row',
              alignItems: 'center',
              flexShrink: 1,
            },
          ]}
        >
          <ProductImage
            product={track.track.product}
            isExplicit={isExplicit(track.track)}
            size={48}
          />
          <Text
            style={[
              TextStylesV2.body,
              {
                color: colorsV2.white,
                marginLeft: 8,
                flexShrink: 1,
              },
            ]}
            numberOfLines={1}
            ellipsizeMode="tail"
          >
            {track.track.name}
          </Text>
        </View>

        <View
          style={{
            flexBasis: 90,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginLeft: 8,
          }}
        >
          <Text
            style={[
              TextStylesV2.tinyBold,
              { color: colorsV2.offWhite, textTransform: 'uppercase' },
            ]}
          >
            {formatDate(chartTrackPosition.date, 'short')}
          </Text>
          <Text
            style={[
              TextStylesV2.body,
              {
                color: colorsV2.white,
              },
            ]}
          >
            #{chartTrackPosition.current}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  ) : null
}

export const MarketChartTrackPositionsEmpty: React.FC = () => (
  <AutoLayout style={{ padding: 26, alignItems: 'center' }} gap={36}>
    <Text
      style={[
        TextStylesV2.body,
        {
          color: colorsV2.white,
          textAlign: 'center',
          padding: 10,
        },
      ]}
    >
      {Strings.Shared.NoArtistTracksFeaturedInMarketChart}
    </Text>
    <NoData />
  </AutoLayout>
)

/**
 * A tile representing track positions on market charts
 */
export const MarketChartTrackPositionsTile: React.FC<{
  countryCode: string
  dsp: ChartDsp
  timeInterval: TimeInterval
  onPress: () => void
  style?: StyleProp<ViewStyle>
}> = ({ countryCode, dsp, timeInterval, onPress, style }) => {
  const numTopItems = 5
  const currentInterval = timeRangeInterval(timeInterval)
  const chartGroup = dspTitleProps[dsp]

  const { data, error } = useMarketChartTrackPositions(
    chartGroup.chartGroup,
    countryCode,
    currentInterval
  )

  const chartTrackPositions = data?.chartTrackPositions

  return (
    <DataTile
      dsp={dsp}
      dspAdditionalText={Strings.Shared.Chart}
      title={chartGroup.title}
      subTitle={formatInterval(currentInterval)}
      onPress={onPress}
      style={[style]}
      error={error}
    >
      {chartTrackPositions != null ? (
        <FlatList
          data={chartTrackPositions.slice(0, numTopItems)}
          renderItem={({
            item,
          }: {
            item: ChartTrackPosition
            index: number
          }) => (
            <MarketChartTrackPositionItem
              key={item.isrc}
              chartTrackPosition={item}
              style={{ paddingBottom: 16 }}
            />
          )}
          ListEmptyComponent={MarketChartTrackPositionsEmpty}
          keyExtractor={(item) => item.isrc}
        />
      ) : null}
    </DataTile>
  )
}