import React from 'react'
import { StyleProp, ViewStyle } from 'react-native'
import { PlaylistTrackPositionWithCurrentStreams } from '../types/types'
import { EntityPositionListItem } from './EntityPositionListItem'
import { PlaylistImage } from './PlaylistImage'

const imageSize = 48

export const TrackPlaylist: React.FC<{
  playlist: PlaylistTrackPositionWithCurrentStreams
  showDetails: boolean
  pressDisabled?: boolean
  style?: StyleProp<ViewStyle>
  onPress?: (playlist: PlaylistTrackPositionWithCurrentStreams) => void
}> = ({ playlist, pressDisabled, style, showDetails, onPress }) => (
  <EntityPositionListItem
    image={
      <PlaylistImage
        playlist={playlist?.item?.playlist}
        imageSize={imageSize}
      />
    }
    name={playlist.item.playlist.name}
    onPress={() => onPress?.(playlist)}
    pressDisabled={pressDisabled}
    isNew={playlist.item.numWeeksOn === 0 && showDetails}
    streams={playlist.data}
    position={
      // Don't display playlist position and position change for algorithmic playlists. Playlist position and change for algorithmic playlists is a side effect of how they are obtained, and shouldn't be defined in the source data
      playlist.item.playlist.playlistType !== 'algorithmic'
        ? playlist.item
        : undefined
    }
    showDetails={showDetails}
    style={style}
  />
)