import React, { Component } from "react";
import { TabNavigator } from "react-navigation";
import { Button, Text, Icon, Footer, FooterTab } from "native-base";
import MoviesScreen from './MoviesScreen';

export default (MainScreenNavigator = TabNavigator(
  {
    TopRated: { screen: props => <MoviesScreen category="top-rated"/> },
    Upcoming: { screen: props => <MoviesScreen category="upcoming"/> },
    NowPlaying: { screen: props => <MoviesScreen category="now-playing"/> },
    Popular: { screen: props => <MoviesScreen category="popular"/> },
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate("TopRated")}>
              <Icon name="bowtie" />
              <Text>Top rated</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("Upcoming")}>
              <Icon name="briefcase" />
              <Text>Upcoming</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("NowPlaying")}>
              <Icon name="headset" />
              <Text >Now</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 3}
              onPress={() => props.navigation.navigate("Popular")}>
              <Icon name="headset" />
              <Text>Popular</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));