import React from 'react'

import { Track } from '../types/Track'
import { ListItemContainer } from './ListItemContainer'
import { ListItemTitle } from './ListItemTitle'
import { ListItemInfoContainer } from './ListItemInfoContainer'
import { ListItemInfoDate } from './ListItemInfoDate'
import { ListProductImage } from './ListProductImage'
import { ListItemSupplName } from './ListItemSupplName'
import { ListItemFavoriteIndicator } from './ListItemFavoriteIndicator'
import { isExplicit } from '../tracks'

export const DateListItem: React.FC<{
  track: Track
  onPress?: () => void
}> = ({ track, onPress }) => {
  return (
    <ListItemContainer onPress={onPress}>
      <ListProductImage
        product={track.product}
        isExplicit={isExplicit(track)}
      />
      <ListItemInfoContainer>
        <ListItemTitle title={track.name} />
        {track.trackNameSuppl != null ? (
          <ListItemSupplName title={track.trackNameSuppl} />
        ) : null}
        {track.product.releaseDate != null ? (
          <ListItemInfoDate releaseDate={track.product.releaseDate} />
        ) : null}
      </ListItemInfoContainer>
      {track.isFavorite && <ListItemFavoriteIndicator />}
    </ListItemContainer>
  )
}