const Login = TabNavigator({
  SignUp: { screen: SignUp },
  SignIn: { screen: SignIn },
}, {
  initialRouterName: 'SignUp',
  tabBarOptions: {
    showLabel: false,
    activeTintColor: '#FF327C',
    style: {
      backgroundColor: 'transparent',
      borderTopWidth: 0,
      borderBottomWidth: 1,
      borderColor: colors.GRAY,
      bottom: 350,
    },
  },
})

const App = TabNavigator({
  Home: { screen: Home },
  Records: { screen: Records },
  MedicalDataSearch: { screen: MedicalDataSearch },
  Search: { screen: Search },
  Profile: { screen: UserProfile },
}, {
  initialRouteName: 'Home',
  tabBarOptions: {
    activeTintColor: '#FF327C',
    inactiveTintColor: '#C9C9C9',
    showLabel: false,
  },
})

const Router = StackNavigator({
  Login: { screen: Login },
  App: { screen: App },
}, {
  initialRouteName: 'Login',
  headerMode: 'none',
})


/**** USER PROFILE ****/

class UserProfile extends Component {
  static navigationOptions = {
    tabBarVisible: false,
    tabBar: () => ({
      icon: ({ tintColor }) => <Icon name="user" color={tintColor} />,
    }),
  }

  render() {
    return (
      <AppWrapper firstName={d.firstName} lastName={d.lastName}>
        <View style={styles.container}>
          <View style={[styles.row, styles.topRow]}>
            <Image source={d.userImage} style={styles.avatar} />
            <View style={styles.column}>
              <View style={styles.row}>
                {d.details.map(section => (
                  <View>
                    <Text style={styles.amount}>{section.amount}</Text>
                    <Text style={styles.title}>{section.title}</Text>
                  </View>
                ))}
              </View>
              <Text style={styles.location}>{d.location}</Text>
            </View>
          </View>
        </View>
      </AppWrapper>
    )
  }
}