import React from 'react'

import { Filters, streamingDspFilters } from '../../components/Filters'
import { TrackWithStreamsByDspAndDate } from '../../types/types'
import { RefreshControlProps } from 'react-native'
import { Track } from '../../types/Track'
import { TrackList, TrackListItem } from '../../components/TrackList'
import { TrackListSkeleton } from '../../components/Skeleton'
import { trackMatchesDsp } from '../../util'
import { DspSlug } from '../../types/types'
import { periodToPeriodChangePercentage } from '../../streams'
import { Item } from '../../components/StreamsListItem'

export type SortFn = (a: TrackListItem, b: TrackListItem) => number
export type FilterFn = (track: TrackListItem) => boolean

export const TrackListStreamsTab: React.FC<{
  tracks?: TrackWithStreamsByDspAndDate[]
  limit?: number
  onLoad: (dsp: DspSlug) => void
  refreshControl: React.ReactElement<RefreshControlProps>
  onPressTrack: (isrc: string) => void
  beforeList?: React.ReactNode
  sortFn: SortFn
  filterFn?: FilterFn
  displayRank?: boolean
  showDspSelector?: boolean
  ListItem: React.FC<Item>
}> = ({
  tracks,
  onLoad,
  limit,
  refreshControl,
  onPressTrack,
  beforeList,
  sortFn,
  filterFn,
  displayRank,
  showDspSelector,
  ListItem,
}) =>
  tracks ? (
    <Filters
      filters={streamingDspFilters}
      selectedFilter="all"
      onLoad={onLoad}
      showSelector={showDspSelector}
    >
      {(dsp) => (
        <React.Fragment key={dsp}>
          {beforeList}
          <TrackList
            refreshControl={refreshControl}
            renderTrack={(track, i) => (
              <ListItem
                key={track.track.sonyTrackId}
                index={displayRank === false ? null : i}
                track={track.track}
                currentPeriodStreams={track.currentPeriodStreams}
                changePercentage={track.changePercentage}
                onPress={() => onPressTrack(track.track.isrc)}
              />
            )}
            tracks={tracks
              .flatMap(trackMatchesDsp(dsp))
              .map(({ item, data }) => ({
                track: item,
                currentPeriodStreams: data.currentPeriod,
                changePercentage: periodToPeriodChangePercentage(data),
              }))
              .sort(sortFn)
              .filter(filterFn)
              .slice(0, limit)}
          />
        </React.Fragment>
      )}
    </Filters>
  ) : (
    <TrackListSkeleton numItems={4} dspFilter />
  )

TrackListStreamsTab.defaultProps = { filterFn: () => true }