import React from 'react'
import {
  View,
  StyleSheet,
} from 'react-native'
import { Caption } from 'react-native-paper'
import Layout from 'constants/Layout'

import { withTheme } from 'react-native-paper'
import { withNavigation } from 'react-navigation'
import { useTranslation } from 'react-i18next'

const trackerWidth = (Layout.window.width - 24) - 28

const LifetimeIndicator = ({
  theme,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <View style={[{ left: '0%' }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={[styling.caption, styling.captionStart]}>{t('Day')}</Caption>
      </View>
      <View style={[{ left: '25%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={styling.caption}>{t('Week')}</Caption>
      </View>
      <View style={[{ left: '50%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={styling.caption}>{t('Month')}</Caption>
      </View>
      <View style={[{ left: '75%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={styling.caption}>{t('Year')}</Caption>
      </View>
      <View style={[{ left: '100%', }, styling.indicator]}>
        <View style={[styling.bar, { marginLeft: 2 }]} />
        <Caption style={[styling.caption, styling.captionEnd]}>{t('Forever')}</Caption>
      </View>
    </View>
  )
}

const styles = theme => StyleSheet.create({
  root: {
    flexDirection: 'row',
    width: trackerWidth,
    height: 36,
  },
  indicator: {
    width: 24,
    height: 24,
    position: 'absolute',
    alignItems: 'center',
  },
  bar: {
    width: 2,
    borderRadius: 1,
    height: 10,
    backgroundColor: theme.colors.disabled,
  },
  caption: {
    position: 'absolute',
    width: 100,
    paddingTop: 12,
    textAlign: 'center',
  },
  captionStart: {
    textAlign: 'left',
    left: 0,
  },
  captionEnd: {
    textAlign: 'right',
    right: 0,
  },
})

export default withNavigation(
  withTheme(LifetimeIndicator)
)