import React from 'react'

import { TrackListItemFieldsFragment } from '../../graphql/__generated__/sdk'
import { ListItemContainer } from '../ListItemContainer'
import { ListItemInfoContainer } from '../ListItemInfoContainer'
import { ListItemInfoDate } from '../ListItemInfoDate'
import { ListItemSupplName } from '../ListItemSupplName'
import { ListItemTitle } from '../ListItemTitle'
import { ListProductImage } from '../ListProductImage'

export const TrackListItem: React.FC<{
  track: TrackListItemFieldsFragment
  onPress?: () => void
}> = ({ track, onPress }) => (
  <ListItemContainer onPress={onPress} size="small">
    <ListProductImage
      product={track.product}
      size="small"
      isExplicit={track.isExplicit}
    />
    <ListItemInfoContainer>
      <ListItemTitle title={track.name} />
      {track.nameSuppl != null ? (
        <ListItemSupplName title={track.nameSuppl} />
      ) : null}
      {track.product.releaseDate != null ? (
        <ListItemInfoDate
          releaseDate={track.product.releaseDate}
          showDateDistance={false}
        />
      ) : null}
    </ListItemInfoContainer>
  </ListItemContainer>
)