const AuthStack = createStackNavigator(
    {
        Login: {
            screen: LoginScreen
        },
        Register: {
            screen: RegisterScreen
        }
    },
    {
        initialRouteName: 'Login',
        transitionConfig: (transitionProps) => ({
            containerStyle: {
                paddingBottom: transitionProps.index === 0 ? 0 : getBottomSpace()
            }
        }),
    }
);

const HomeStack = createStackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        PlayModes: {
            screen: PlayModesScreen,
        },
        PlayingMatch: {
            screen: PlayingMatchScreen,
        },
        Matching: {
            screen: MatchingScreen,
        },
        Matches: {
            screen: MatchesScreen,
        },
    },
    {
        initialRouteName: 'Home',
        transitionConfig: (transitionProps) => ({
            containerStyle: {
                paddingBottom: transitionProps.index === 0 ? 0 : getBottomSpace()
            }
        }),
    }
);

const MainStack = createBottomTabNavigator(
    {
        Home: {
            screen: HomeStack,
            navigationOptions: {
                tabBarLabel: ({ focused }) => (
                    <TabBarLabel title={'Home'}/>
                ),
                tabBarIcon: ({ focused }) => (
                    <TabBarIcon src={images['home'].source} />
                ),
                // tabBarOnPress,
            }
        },
        Leaderboard: {
            screen: LeaderboardScreen,
            navigationOptions: {
                tabBarLabel: ({ focused }) => (
                    <TabBarLabel title={'Leaderboard'}/>
                ),
                tabBarIcon: ({ focused }) => (
                    <TabBarIcon src={images['ranking'].source} />
                ),
                // tabBarOnPress,
            }
        },
    },
    {
        initialRouteName: 'Home',
        tabBarOptions: {
            style: {
                margin: 0,
                padding: 0,
                backgroundColor: '#2e6eff',
            },
            /*indicatorStyle: {
                opacity: 1 // disable bottom line of android
            },
            labelStyle: {
                fontSize: 10,
                margin: 0,
                padding: 0
            },
            iconStyle: {
                margin: 0,
                padding: 0
            },
            tabStyle: {
                margin: 0,
                padding: 0
            }*/
        }
    }
);
const RootStack = createSwitchNavigator(
    {
        Auth: AuthStack,
        Main: MainStack,
    },
    {
        initialRouteName: 'Auth',
    }
);
const App = createAppContainer(RootStack);