import React from 'react'
import { StyleProp, ViewStyle } from 'react-native'
import { ChartDsp, dspNames } from '../Consts'
import { useTrackPlaylistsData } from '../hooks/useTrackPlaylistsData'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AutoLayout } from './AutoLayout'
import { DataTile, DataTileText } from './DataTile'
import { TrackPlaylist } from './TrackPlaylistV2'

/**
 * A tile representing track playlists for a DSP
 */
export const TrackPlaylistsTile: React.FC<{
  isrc: string
  dsp: ChartDsp
  timeInterval: TimeInterval
  onPress: () => void
  style?: StyleProp<ViewStyle>
}> = ({ isrc, dsp, timeInterval, onPress, style }) => {
  const numTopItems = 5
  const currentInterval = timeRangeInterval(timeInterval)
  const { data, error } = useTrackPlaylistsData(
    isrc,
    currentInterval,
    dsp,
    null
  )
  const playlistTrackPositions = data?.playlistTrackPositions
  const firstPlaylistTrackPositions =
    playlistTrackPositions != null
      ? playlistTrackPositions.slice(0, numTopItems)
      : null

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.Playlists}
      subTitle={formatInterval(currentInterval)}
      onPress={onPress}
      style={[style]}
      error={error}
    >
      {firstPlaylistTrackPositions != null ? (
        firstPlaylistTrackPositions.length > 0 ? (
          <AutoLayout gap={16}>
            {firstPlaylistTrackPositions.map((playlist, i) => (
              <TrackPlaylist
                playlist={playlist}
                showDetails={false}
                key={playlist.item.playlist.sonyPlaylistId}
                pressDisabled
              />
            ))}
          </AutoLayout>
        ) : (
          <DataTileText
            text={Strings.PlaylistsEmpty.replace('%s', Strings.DspName[dsp])}
          />
        )
      ) : null}
    </DataTile>
  )
}