import React from 'react'

import { ProductListItemFieldsFragment } 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 interface ProductListItemProps {
  index?: number
  product: ProductListItemFieldsFragment
  onPress?: () => void
}

export const ProductListItem: React.FC<ProductListItemProps> = ({
  product,
  onPress,
  index,
}) => {
  return (
    <ListItemContainer onPress={onPress}>
      <ListProductImage
        product={product}
        isExplicit={product.isExplicit}
        rank={index}
      />
      <ListItemInfoContainer>
        <ListItemTitle title={product.name} />
        {product.digitalTitleSuppl != null ? (
          <ListItemSupplName title={product.digitalTitleSuppl} />
        ) : null}
        {product.releaseDate != null ? (
          <ListItemInfoDate releaseDate={product.releaseDate} />
        ) : null}
      </ListItemInfoContainer>
    </ListItemContainer>
  )
}