// tab navigator screens
import HomeScreen from './screens/Home.js';
import SearchScreen from './screens/Search.js';
import MessageScreen from './screens/Message.js';
import ProfileScreen from './screens/Profile.js';

static navigationOptions = {
    tabBarIcon: ({ focused, tintColor }) => (
        focused ? <Ionicons name={'ios-beer'} size={25} color={'#FFFFFF'} />
            : <Ionicons name={'ios-beer'} size={25} color={'#536497'} />
    ), tabBarPosition: 'bottom',
    tabBarOptions: {
        showLabel: false,
        activeTintColor: 'white',
        inactiveTintColor: '#536497',
        style: {
            backgroundColor: '#030e2c',
        }
    },
    animationEnabled: false,
    swipeEnabled: false,
};

render() {
    return (
        <View style={styles.container}>
            <Button title="Show me more of the app" onPress={this._showMoreApp} />
            <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
        </View>
    );
}

_showMoreApp = () => {
    this.props.navigation.navigate('Search');
};

_signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
};
}

const styles = StyleSheet.create({
container: {
    backgroundColor: '#1c2e63',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
});

const AppTab = createBottomTabNavigator({ Home: HomeScreen, Search:
SearchScreen, Message: MessageScreen, Profile: ProfileScreen });

const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
 {
  AuthLoading: AuthLoadingScreen,
  App: AppTab,
  Auth: AuthStack,
 },
 {
  initialRouteName: 'AuthLoading',
 },
);