import React from 'react'
import { StyleProp, ViewStyle } from 'react-native'
import { dspTitleProps, sortCharts } from '../charts'
import { ChartDsp } from '../Consts'
import { useTrackCharts } from '../hooks/useTrackCharts'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AutoLayout } from './AutoLayout'
import { ChartMarketPlacementRow } from './ChartMarketPlacementRow'
import { DataTile, DataTileText } from './DataTile'
import { SelectedMarketDivider } from './SelectedMarketDivider'

/**
 * A tile representing track charts for a DSP
 */
export const TrackChartsTile: React.FC<{
  isrc: string
  dsp: ChartDsp
  timeInterval: TimeInterval
  countryCode?: string
  onPress: () => void
  style?: StyleProp<ViewStyle>
}> = ({ isrc, dsp, timeInterval, countryCode, onPress, style }) => {
  const numTopItems = 5
  const currentInterval = timeRangeInterval(timeInterval)
  const { data, error } = useTrackCharts(isrc, currentInterval, dsp)
  const chartsForDsp = data?.charts?.find((chart) => chart.dsp === dsp)
  const chartsEmptyText: Record<ChartDsp, string> = {
    spotify: Strings.ChartsEmptySpotifyTop200,
    apple: Strings.ChartsEmptyAppleTop100,
  }
  const selectedMarketChartPosition = chartsForDsp?.chartTrackPositions?.find(
    ({ chart }) => chart.countryCode === countryCode
  )

  return (
    <DataTile
      dsp={dsp}
      title={dspTitleProps[dsp].title}
      subTitle={formatInterval(currentInterval)}
      onPress={
        chartsForDsp?.chartTrackPositions?.length ?? -1 > 0
          ? onPress
          : undefined
      }
      style={[style]}
      error={error}
    >
      {chartsForDsp != null ? (
        chartsForDsp.chartTrackPositions.length > 0 ? (
          <AutoLayout gap={16}>
            {[
              ...chartsForDsp.chartTrackPositions
                .sort(sortCharts)
                .slice(0, numTopItems)
                .map((chartPosition, i) => (
                  <ChartMarketPlacementRow
                    key={i}
                    countryCode={chartPosition.chart.countryCode}
                    countryName={
                      chartPosition.chart.countryName ??
                      chartPosition.chart.countryCode
                    }
                    current={chartPosition.current}
                    date={chartPosition.date ?? undefined}
                  />
                )),
              ...(selectedMarketChartPosition != null &&
              countryCode !== 'worldwide'
                ? [
                    <SelectedMarketDivider key="selectedMarket" />,
                    <ChartMarketPlacementRow
                      key={`selected-${countryCode}`}
                      countryCode={
                        selectedMarketChartPosition.chart.countryCode
                      }
                      countryName={
                        selectedMarketChartPosition.chart.countryName ??
                        selectedMarketChartPosition.chart.countryCode
                      }
                      current={selectedMarketChartPosition.current}
                      date={selectedMarketChartPosition.date ?? undefined}
                    />,
                  ]
                : []),
            ]}
          </AutoLayout>
        ) : (
          <DataTileText text={chartsEmptyText[dsp]} />
        )
      ) : null}
    </DataTile>
  )
}