class App extends Component {

    render(){
     const MainNavigator = TabNavigator({
         login: { screen : LoginForm },
         register: { screen : RegisterForm },

     },
     {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  color:"#aa4a00",
  tabBarOptions: {
    labelStyle: {
      fontSize: 15,
      fontFamily: 'HelveticaNeueBd',
      color: '#4B4C4B',
      backgroundColor: '#ffffff'
    },
    indicatorStyle : {
      backgroundColor: '#aa4a00'
    },
    style : {
      borderBottomColor: '#ebcccc',
     // borderBottomWidth: 10,
    },
    tabStyle: {
    activeBackgroundColor : "#aa4a00",
    inactiveBackgroundColor: '#dddddd',
    upperCaseLabel: false
  }
  }
     });

    return (

    <View style={{flex: 1}}>
    <MainNavigator />
    </View>

    );
}
renderContent(){
    if(!this.state.initialRoute){
        return <Splash />
}
return(
<Navigator
                initialRoute={this.state.initialRoute}
                initialRouteStack={routeStack}
                configureScene={() => Navigator.SceneConfigs.HorizontalSwipeJump}
                onWillFocus={route => store.dispatch(routeHistoryActions.push(route))}
                renderScene={(route, navigator) =>
                    <route.component route={route} navigator={navigator} {...route.passProps} />
                }
            />
);
}

}
export default App;

class LoginForm extends Component {
    constructor(props) {
            super(props);

            this.initialState = {
                isLoading: false,
                error: null,
                username: '',
                password: '',
            };
            this.state = this.initialState;
        }
   componentWillMount(){
    fetch('https://www.mywebsite.com',{
        method: 'POST',
        headers:{
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify({
                    grant_type: 'authorization_code',
                    username: this.state.username,
                    password: this.state.password,
                    client_id: 'xxxxx',
                    client_secret: 'xxxx',
                    callback_url: 'www.mywebsite.com'
                })

    })
      .then(response => response.json())
      .then((responseData) => {

            console.log(responseData);
          })
       .done();
        }
        render(){
            return(

                   <Container>
                     <View style={styles.container}>
                     <View style={styles.div}>
                     <Image source={require('../Images/logo.png')} style={{ marginTop:30}} />
                     </View>
                     <View style={styles.content}>
                      <InputGroup style={styles.input}>
                        <Input
                        label="Email"
                        placeholder="email@gmail.com"   />
                            <Image source={require('../Images/envelope.png')} style={{width:30, height:30, marginRight:5}} />
                      </InputGroup>
                      <InputGroup style={styles.input}>

                        <Input
                        label="Password"
                        placeholder="Password"
                        secureTextEntry />
                            <Image source={require('../Images/lock.png')} style={{width:30, height:30, marginRight:5}} />

                      </InputGroup>

                                    <Button style={styles.button} onPress={() => this.props.navigation.navigate("HomeScreen")} >
                                        <Text style={{paddingLeft:50}}>Login</Text>
                                    </Button>
                      </View>
                     </View>
                   </Container>

            );
        }
    }

const StackScreens = StackNavigator({
        LoginScreen: {screen : LoginScreen},
        Home: {screen: HomeScreen},
        CourseListing:{screen: CourseListing},
        CategoryDetail: {screen: CategoryDetail},
        DetailedView: {screen: DetailedView},
        IndividualSection: {screen: IndividualSection}
    })

    export const MyDrawer = DrawerNavigator({
       Home: {
         screen: StackScreens,
      },
      Profile: {
          screen: Profile
      },
      FAQ: {
          screen: Faq
      }

class MyHome extends Component {


    render(){
        return(

        <MyDrawer />
        );
    }

}
export default MyHome;