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

import { colors } from '../Colors'
import { PlaylistDsp } from '../Consts'
import { TextStyles } from '../Styles'
import { PlaylistType } from '../graphql/__generated__/sdk'
import { useTrackPlaylistsData } from '../hooks/useTrackPlaylistsData'
import { Strings } from '../i18n'
import { orderBysCurrent } from '../screens/TrackPlaylistsScreen'
import { TimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AutoLayout } from './AutoLayout'
import { DataTile, DataTileText } from './DataTile'
import { TrackPlaylistCurrent } from './TrackPlaylistV2'
import { EntityPositionAndChange } from './listitems/EntityPositionListItem'

/**
 * A tile representing track playlists for a DSP
 */
export const TrackPlaylistsTile: React.FC<{
  isrc: string
  dsp: PlaylistDsp
  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 } = useTrackPlaylistsData(
    isrc,
    currentInterval,
    dsp,
    countryCode,
    [],
    orderBysCurrent.streams,
    { first: numTopItems }
  )
  const playlistTrackPositions =
    data?.artist?.track?.currentPlaylists.edges.map(({ node }) => node)

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.Playlists}
      subTitle={formatInterval(currentInterval)}
      onPress={onPress}
      style={[style]}
      error={error}
    >
      {playlistTrackPositions != null ? (
        playlistTrackPositions.length > 0 ? (
          <AutoLayout gap={16}>
            {playlistTrackPositions.map((playlist) => (
              <TrackPlaylistCurrent
                playlist={playlist}
                extra={
                  playlist.playlist.type === PlaylistType.Algorithmic ? (
                    <Text style={[TextStyles.small, { color: colors.white }]}>
                      {Strings.PlaylistTypes.algorithmic}
                    </Text>
                  ) : (
                    <EntityPositionAndChange
                      position={{
                        current: playlist.currentPosition ?? undefined,
                        previous: playlist.previousPosition ?? undefined,
                      }}
                    />
                  )
                }
                showDetails={false}
                key={playlist.playlist.id}
                pressDisabled
              />
            ))}
          </AutoLayout>
        ) : (
          <DataTileText
            text={Strings.PlaylistsEmpty.replace('%s', Strings.DspName[dsp])}
          />
        )
      ) : null}
    </DataTile>
  )
}