import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'
import { TextStylesV2 } from '../Styles'
import { formatDate } from '../util'
import { CountryIconAndName } from './CountryIconAndName'

/**
 * A row representing a track placement on a market-specific chart
 */
export const ChartMarketPlacementRow: React.FC<{
  countryCode: string
  countryName: string
  current: number
  date?: string
  style?: StyleProp<ViewStyle>
}> = ({ countryCode, countryName, current, date, style }) => (
  <View
    style={[
      {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      },
      style,
    ]}
  >
    <CountryIconAndName
      countryCode={countryCode}
      countryName={countryName}
      style={{ flexShrink: 1 }}
    />
    <View
      style={{
        flexBasis: 90,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginLeft: 8,
      }}
    >
      <Text
        style={[
          TextStylesV2.tinyBold,
          { color: colorsV2.metals.metal0, textTransform: 'uppercase' },
        ]}
      >
        {date != null ? formatDate(date, 'short') : ' '}
      </Text>
      <Text
        style={[
          TextStylesV2.body,
          {
            color: colorsV2.white,
          },
        ]}
      >
        #{current}
      </Text>
    </View>
  </View>
)