import React from 'react'

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

export interface Item {
  track: TrackListItemFieldsFragment
  index?: number
  currentPeriodStreams?: number
  changePercentage?: number
  onPress?: () => void
}

export const StreamsListItem: React.FC<Item> = ({
  track,
  currentPeriodStreams,
  changePercentage,
  index,
  onPress,
}) => {
  return (
    <ListItemContainer onPress={onPress}>
      <ListProductImage
        product={track.product}
        isExplicit={track.isExplicit}
        rank={index}
      />
      <ListItemInfoContainer>
        <ListItemTitle title={track.name} />
        {track.nameSuppl != null ? (
          <ListItemSupplName title={track.nameSuppl} />
        ) : null}
        <ListItemInfoStreamsWithChange
          currentPeriod={currentPeriodStreams}
          changePercentage={changePercentage}
        />
      </ListItemInfoContainer>
      {track.isFavorite && <ListItemFavoriteIndicator />}
    </ListItemContainer>
  )
}