const HomeTabNavigation = TabNavigator(
  {
    Profile: { screen: Profile },
    PhotoCard: { screen: PhotoCard },
    Chat: { screen: Chat }
  },
  {
    tabBarPosition: "top",
    initialRouteName: "PhotoCard",
    swipeEnabled: false,
    lazyLoad: false,
    animationEnabled: true,
    tabBarComponent: props => {
      return (
        <Header>
          <FooterTab>
            <Button
              onPress={() => {
                if (props.navigation.state.index !== 0) {
                  props.navigation.navigate("Profile");
                  this.props.setCurrentDisplayingScreen("Profile");
                }
              }}
            >
              <Icon
                name="md-person"
                size={20}
                style={
                  props.navigation.state.index === 0
                    ? styles.activeIcon
                    : styles.inActiveIcon
                }
              />
            </Button>

            <Button
              onPress={() => {
                if (props.navigation.state.index !== 1) {
                  props.navigation.navigate("PhotoCard");
                  this.props.setCurrentDisplayingScreen("PhotoCard");
                }
              }}
            >
              <Thumbnail
                small
                source={
                  props.navigation.state.index === 1
                    ? require("../../../assets/images/logo.png")
                    : require("../../../assets/images/logo1.png")
                }
              />
            </Button>

            <Button
              onPress={() => {
                if (props.navigation.state.index !== 2) {
                  props.navigation.navigate("Chat");
                  this.props.setCurrentDisplayingScreen("Chat");
                }
              }}
            >
              <Icon
                name="md-chatboxes"
                style={
                  props.navigation.state.index === 2
                    ? styles.activeIcon
                    : styles.inActiveIcon
                }
              />
              <BadgeTabIcon />
            </Button>
          </FooterTab>
        </Header>
      );
    }
  }
);

// Connect redux to call actions and receive new states
export default connect(null, actions)(HomeTabNavigation);