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

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'
import { formatDate } from '../util'
import { Button } from './Button'
import { FavoriteHeart } from './FavoriteHeart'

const styles = StyleSheet.create({
  text: { ...TextStyles.tiny, color: colors.metals.metal0 },
})

/**
 *
 * Common Header used for VideoScreen, TrackScreen, etc.
 *
 */
export const EntityScreenHeader: React.FC<{
  title: string
  subTitle?: string | null
  image: React.ReactChild
  date?: string | null
  style?: StyleProp<ViewStyle>
  isFavorite?: boolean
  setIsFavorite?: (isFavorite: boolean) => void
  onPressCompareButton?: () => void
}> = ({
  title,
  subTitle,
  style,
  image,
  date,
  isFavorite,
  setIsFavorite,
  onPressCompareButton,
}) => (
  <View
    style={[{ flexDirection: 'row', justifyContent: 'space-between' }, style]}
  >
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <View
          style={{
            paddingRight: 16,
            paddingBottom: 16,
          }}
        >
          {image}
        </View>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            flex: 1,
          }}
        >
          {isFavorite != null && setIsFavorite != null && (
            <FavoriteHeart
              isFavorite={isFavorite}
              setIsFavorite={setIsFavorite}
            />
          )}
        </View>
      </View>
      <Text style={[TextStyles.h4, { color: colors.midWhite }]}>{title}</Text>
      {subTitle != null && (
        <Text style={[TextStyles.tiny, { color: colors.midWhite }]}>
          {subTitle}
        </Text>
      )}
      {date != null && <Text style={styles.text}>{formatDate(date)}</Text>}
    </View>
    {onPressCompareButton && (
      <View
        style={{
          flexDirection: 'column-reverse',
        }}
      >
        <Button onPress={onPressCompareButton} type="filled">
          {Strings.Shared.Compare}
        </Button>
      </View>
    )}
  </View>
)