import { StyleSheet, Text, View } from 'react-native'
import { Link } from 'react-router-native'
import { withRouter } from 'react-router'

const TabBar = ({ location, props }) => {
  return (
    <View style={styles.footer}>
      <Items text="Home" link="/" location={location.pathname} />
      <Items text="About" link="/about" location={location.pathname} />
      <Items text="Other" link="/other" location={location.pathname} />
      <Items text="Profile" link="/profile" location={location.pathname} />
    </View>
  )
}

const Items = ({ text, link, location }) => (
  <Link
    to={link}
    underlayColor="red"
    activeOpacity={0}
    underlayColor="powderblue"
  >
    <Text style={location === link ? styles.active : styles.items}>{text}</Text>
  </Link>
)

const styles = StyleSheet.create({
  footer: {
    backgroundColor: 'powderblue',
    flex: 1,
    height: 65,
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderTopColor: 'white',
    borderTopWidth: 1,
  },
  items: {
    paddingTop: 20,
    fontSize: 18,
  },
  active: {
    paddingTop: 20,
    fontSize: 18,
    color: 'white',
  },
})

export default withRouter(TabBar)