import React, { Component } from 'react';
import { View, 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 DSRErJiScreen from './dangshireninfo/index';
import quanshuInfoErJiScreen from './quanshuInfo/index';
import TabBarComponent from '../../components/tabBarComponent';
import QRScannerScreen from './common/QRScannerScreen';
import CameraComponent from '../../components/cameraComponent';

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,
  swipeEnabled: false,
  tabBarOptions: {
    activeTintColor: '#e91e63',
    inactiveTintColor: '#FFFFFF',
    labelStyle: {
      fontSize: 12,
    },
    showIcon: true,
  },
});
const MainWindow = StackNavigator(
  {
    Content: {
      screen: Content,
    },
    personCenter: {
      screen: userInfoPageScreen,
    },
    QRScan: {
      screen: QRScannerScreen,
    },
    CameraPhoto: {
      screen: CameraComponent,
    },
  },
  {
    headerMode: 'none',
    navigationOptions: {
      gesturesEnabled: false,
    },
  },
);
class MainPage extends Component {
  onActionSelected = () => {
    this.props.navigation.navigate('personCenter');
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ToolbarAndroid
          title="深圳棚改云"
          style={styles.toolbar}
          actions={[{ title: '个人中心', show: 'never' }]}
          onActionSelected={this.onActionSelected}
          titleColor="#FFFFFF"
        />
        <MainWindow navigation={this.props.navigation} />
      </View>
    );
  }
}
MainPage.router = MainWindow.router;

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

export default MainPage;

