import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    DeviceEventEmitter
} from 'react-native';
import {
    createAppContainer,
    createSwitchNavigator
} from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import Welcome from './pages/Welcome'
import SalesHome from './pages/Sales/Index'
import MineHome from './pages/Mine/Index'
import Outside from './pages/Outside/Index';

const styles = StyleSheet.create({
    iconFont: {
      fontFamily:'iconfont',
      fontSize: 24,
      color: '#757575'
    },
    iconFontFocused: {
      fontFamily:'iconfont',
      fontSize: 24,
      color: '#2b90ea'
    }
})

const TabStack = createMaterialBottomTabNavigator({
    SalesHome: {
        screen: SalesHome,
        navigationOptions: {
            tabBarLabel: '工作台',
            tabBarIcon: ({ focused, horizontal, tintColor }) => (
                <Text style={focused ? styles.iconFontFocused : styles.iconFont}>{'\ue607'}</Text>
            ),
            tabBarOnPress: ({navigation, defaultHandler}) => {
                DeviceEventEmitter.emit("ShowWhiteStatusBar", {});
                defaultHandler();
            },
        }
    },
    MIne: {
        screen: MineHome,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({ focused, horizontal, tintColor }) => (
                <Text style={focused ? styles.iconFontFocused : styles.iconFont}>{'\ue619'}</Text>
            ),
            tabBarOnPress: ({navigation, defaultHandler}) => {
                DeviceEventEmitter.emit("ShowWhiteStatusBar", {});
                defaultHandler();
            },
        }
    },

  },
  {
    shifting: false,
    labeled: true,
    initialRouteName: 'SalesHome',
    activeColor: '#2b90ea',
    activeTintColor: '#cd040d',
    inactiveTintColor: '#2312cd',
    inactiveColor: '#550a05',
    barStyle: { backgroundColor: '#fff' },
  },
//    {
//     defaultNavigationOptions: ({ navigation }) => ({
//         tabBarIcon: ({ focused }) => {
//             const { routeName } = navigation.state
//             return tabarIcons[routeName].render(focused)
//         }
//     }),
//     tabBarOptions: {
//         activeTintColor: '#03C762',
//         inactiveTintColor: '#333'
//     },
//   }
)

// const MainRoot=createStackNavigator({
//     Main: {
//         screen: TabStack,
//     },
//     // Detail: {
//     //     screen: Detail,
//     //     navigationOptions: {
//     //         headerTitle: '详情页'
//     //     }
//     // }
// }, {
//     initialRouteName: 'Main',
// })

const RootStack = createAppContainer(createSwitchNavigator({
    Main: {
        screen: TabStack,
    },
    Welcome:{
        screen:Welcome,
    },
    Login: { screen: Outside },
},{
    initialRouteName:'Welcome'
}))

export default RootStack;