import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { TabNavigator } from 'react-navigation';
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 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: () => (
        <Image
          source={chatsIcon}
          style={[styles.icon]}
        />
      ),
    },
  },
  DSRInfo: {
    screen: DSRErJiScreen,
    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]}
        />
      ),
    },
  },
  QSInfo: {
    screen: Empty('权属信息的新增，修改，还可以勾选房子', 'DSRInfoScreen'),
    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]}
        />
      ),
    },
  },
  RKInfo: {
    screen: peopleInfoErJiScreen,
    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]}
        />
      ),
    },
  },
  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: 'gray',
    labelStyle: {
      fontSize: 12,
    },
    showIcon: true,
  },
});

class MainPage extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 36, backgroundColor: '#08BBF9', flexDirection: 'row' }}>
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ fontSize: 18, color: 'white', alignSelf: 'center' }}>深圳房屋普查</Text>
          </View>
        </View>
        <Content navigation={this.props.navigation} />
      </View>
    );
  }
}
MainPage.router = Content.router;

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
});

export default MainPage;

