import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'

import { TextStyles } from '../Styles'
import { Strings } from '../i18n'
import { Product } from '../types/Product'
import { productImageFieldsFromProduct } from '../types/graphqlCompatibilityHelpers'
import { formatDate } from '../util'
import { Button } from './Button'
import { ProductImage } from './ProductImage'

export const ProductDetailHeading: React.FC<{
  product: Product
  isExplicit: boolean
  style?: StyleProp<ViewStyle>
  onPressCompare: () => void
  disableCompare?: boolean
}> = ({ product, isExplicit, style, onPressCompare, disableCompare }) => {
  return (
    <View
      style={{
        padding: 16,
      }}
    >
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'flex-end',
        }}
      >
        <View
          style={{
            flexDirection: 'column',
          }}
        >
          <ProductImage
            size={128}
            product={productImageFieldsFromProduct(product)}
            isExplicit={isExplicit}
            style={style}
          />
          {product.releaseDate && (
            <Text
              style={{
                ...TextStyles.body,
                textTransform: 'uppercase',
                paddingTop: 8,
              }}
            >
              {formatDate(product.releaseDate)}
            </Text>
          )}
        </View>
        <Button onPress={onPressCompare} type="filled" muted={disableCompare}>
          {Strings.Shared.CompareTracks}
        </Button>
      </View>
    </View>
  )
}