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

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { formatDateDistanceToNow } from '../util'
import { CalendarDate } from './CalendarDate'

interface ListItemInfoDateProps {
  releaseDate: string
  showDateDistance?: boolean
}

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  inlineBlock: {
    flex: 1,
    flexDirection: 'row',
  },
  release: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  releaseDateDistance: {
    ...TextStyles.tinyCaps,
    color: colors.midWhite,
    flexWrap: 'wrap',
    flex: 1,
    textAlign: 'right',
  },
  arrow: {
    marginTop: 4,
    marginRight: 8,
  },
})

export const ListItemInfoDate: React.FC<ListItemInfoDateProps> = ({
  releaseDate,
  showDateDistance = true,
}) => {
  return (
    <View style={Styles.container}>
      <View style={Styles.inlineBlock}>
        <View style={Styles.release}>
          <CalendarDate date={releaseDate} style={{ marginEnd: 4 }} />
          {showDateDistance && (
            <Text style={Styles.releaseDateDistance}>
              {formatDateDistanceToNow(releaseDate)}
            </Text>
          )}
        </View>
      </View>
    </View>
  )
}