import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { colors, colorsV2 } from '../Colors'
import { formatDate } from '../util'
import { ProductImage } from './ProductImage'
import { TextStyles, TextStylesV2 } from '../Styles'
import { Product } from '../types/Product'
import { Strings } from '../i18n'
import { TouchableOpacity } from 'react-native-gesture-handler'

export const ProductDetailHeading: React.FC<{
  product: Product
  isExplicit: boolean
  style?: StyleProp<ViewStyle>
  onPressCompare: () => void
}> = ({ product, isExplicit, style, onPressCompare }) => {
  return (
    <View
      style={{
        padding: 16,
      }}
    >
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'flex-end',
        }}
      >
        <ProductImage
          size={128}
          product={product}
          isExplicit={isExplicit}
          style={style}
        />
        <TouchableOpacity onPress={onPressCompare}>
          <Text style={[TextStylesV2.body, { color: colorsV2.white }]}>
            {Strings.Shared.Compare}
          </Text>
        </TouchableOpacity>
      </View>
      {product.releaseDate && (
        <Text
          style={{
            ...TextStyles.tiny,
            color: colors.mutedBrightMetal,
            textTransform: 'uppercase',
            paddingTop: 8,
          }}
        >
          {formatDate(product.releaseDate)}
        </Text>
      )}
    </View>
  )
}