import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, ToolbarAndroid, Dimensions } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import userInfoPageScreen from './userinfo/index';
import fwInfo from './fwInfo';
import peopleInfoErJiScreen from './peopleInfo/index';
import chatsIcon from '../../../image/chats-icon.png';
import Empty from '../empty';
import DSRErJiScreen from './dangshireninfo/index';
import quanshuInfoErJiScreen from './quanshuInfo/index';
import TabBarComponent from '../../components/tabBarComponent';

const Content = TabNavigator({
  FWInfo: {
    screen: fwInfo,
    navigationOptions: {
      lazy: true,
      tabBarLabel: '房屋信息',
      // Note: By default the icon is only shown on iOS. Search the showIcon option below.
      tabBarIcon: () => (
        <Icon name="home" size={28} color="#FFFFFF" />
      ),
    },
  },
  DSRInfo: {
    screen: DSRErJiScreen,
    navigationOptions: {
      lazy: true,
      tabBarLabel: '权利人信息',
      // Note: By default the icon is only shown on iOS. Search the showIcon option below.
      tabBarIcon: () => (
        <Icon name="person" size={28} color="#FFFFFF" />
      ),
    },
  },
  QSInfo: {
    screen: quanshuInfoErJiScreen,
    navigationOptions: {
      lazy: true,
      tabBarLabel: '权属信息',
      // Note: By default the icon is only shown on iOS. Search the showIcon option below.
      tabBarIcon: () => (
        <Icon name="library-books" size={28} color="#FFFFFF" />
      ),
    },
  },
  RKInfo: {
    screen: peopleInfoErJiScreen,
    navigationOptions: {
      lazy: true,
      tabBarLabel: '人口信息',
      // Note: By default the icon is only shown on iOS. Search the showIcon option below.
      tabBarIcon: () => (
        <Icon name="group-add" size={28} color="#FFFFFF" />
      ),
    },
  },
  // UserInfoPageScreen: {
  //   screen: userInfoPageScreen,
  //   navigationOptions: {
  //     lazy: true,
  //     tabBarLabel: '个人中心',
  //     // Note: By default the icon is only shown on iOS. Search the showIcon option below.
  //     tabBarIcon: () => (
  //       <Image
  //         source={chatsIcon}
  //         style={[styles.icon]}
  //       />
  //     ),
  //   },
  // },
}, {
  lazy: true,
  tabBarPosition: 'bottom',
  tabBarComponent: TabBarComponent,
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#e91e63',
    inactiveTintColor: '#FFFFFF',
    labelStyle: {
      fontSize: 12,
    },
    showIcon: true,
  },
});
const MainWindow = StackNavigator(
  {
    Content: {
      screen: Content,
    },
    personCenter: {
      screen: userInfoPageScreen,
    },
  },
  {
    headerMode: 'none',
    navigationOptions: {
      gesturesEnabled: false,
    },
  },
);
class MainPage extends Component {
  onActionSelected = () => {
    this.props.navigation.navigate('personCenter');
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 46, backgroundColor: '#08BBF9', flexDirection: 'row' }}>
          {/* <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ fontSize: 18, color: 'white', alignSelf: 'center' }}>深圳房屋普查</Text>
          </View> */}
          <ToolbarAndroid
            title="深圳房屋普查"
            style={styles.toolbar}
            actions={[{ title: '个人中心', show: 'never' }]}
            onActionSelected={this.onActionSelected}
            titleColor="#FFFFFF"
          />
        </View>
        <MainWindow navigation={this.props.navigation} />
      </View>
    );
  }
}
MainPage.router = MainWindow.router;

const styles = StyleSheet.create({
  toolbar: {
    backgroundColor: '#2196F3',
    height: 40,
    width: Dimensions.get('window').width,
    alignSelf: 'center',
  },
  icon: {
    width: 26,
    height: 26,
  },
});

export default MainPage;

