import React from 'react'
import {
  StyleProp,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native'
import { colors, colorsV2 } from '../Colors'
import Globe from '../icons/Globe'
import { TextStylesV2 } from '../Styles'
import { formatDate } from '../util'
import { CountryIcon } from './CountryIconAndName'
import { FavoriteHeart } from './FavoriteHeart'
import { MarketSelectorButton } from './MarketSelectorButton'

const styles = StyleSheet.create({
  text: { ...TextStylesV2.tiny, ...{ color: colorsV2.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
}> = ({ title, subTitle, style, image, date, isFavorite, setIsFavorite }) => (
  <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={[TextStylesV2.h4, { color: colors.white }]}>{title}</Text>
      {subTitle != null && (
        <Text style={[TextStylesV2.tiny, { color: colors.white }]}>
          {subTitle}
        </Text>
      )}
      {date != null && <Text style={styles.text}>{formatDate(date)}</Text>}
    </View>
  </View>
)