import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
  NavigatorIOS,
  Dimensions
} from "react-native";

import Home from "./Home/index";
import InsuranceCircle from "./InsuranceCircle/index";
import InsuranceChurch from "./InsuranceChurch/index";
import Mine from "./Mine/index";
import Login from "./Login";

var scale = Dimensions.get("window").scale;

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: "home",
    };
  }

  componentWillMount() {
    console.log("loginSuccess", this.props);
  }

  render() {
    const { loginSuccess } = this.props;
    return loginSuccess ? (
      <TabBarIOS tintColor="#08CC6A" barTintColor="white">
        <TabBarIOS.Item
          title="首页"
          icon={require("../assets/tabbar/ic_home_n.png")}
          selected={this.state.selectedItem == "home"}
          onPress={() => {
            this.setState({
              selectedItem: "home"
            });
          }}
        >
          <NavigatorIOS
            style={{ flex: 1 }}
            initialRoute={{
              component: Home,
              title: "首页",
            }}
          />
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="保圈"
          icon={require("../assets/tabbar/ic_circle_n.png")}
          selected={this.state.selectedItem == "insuranceCircle"}
          onPress={() => {
            this.setState({
              selectedItem: "insuranceCircle"
            });
          }}
        >
          <NavigatorIOS
            style={{ flex: 1 }}
            initialRoute={{
              component: InsuranceCircle,
              title: "保圈",
            }}
          />
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="保堂"
          icon={require("../assets/tabbar/ic_umbrella_n.png")}
          selected={this.state.selectedItem == "insuranceChurch"}
          onPress={() => {
            this.setState({
              selectedItem: "insuranceChurch"
            });
          }}
        >
          <NavigatorIOS
            style={{ flex: 1 }}
            initialRoute={{
              component: InsuranceChurch,
              title: "保堂"
            }}
          />
        </TabBarIOS.Item>
        <TabBarIOS.Item
          title="我的"
          icon={require("../assets/tabbar/ic_mine_n.png")}
          selected={this.state.selectedItem == "mine"}
          onPress={() => {
            this.setState({
              selectedItem: "mine"
            });
          }}
        >
          <NavigatorIOS
            style={{ flex: 1 }}
            initialRoute={{
              component: Mine,
              title: "我的",
              passProps: {
                onLogin: this.props.onLogin
              }
            }}
          />
        </TabBarIOS.Item>
      </TabBarIOS>
    ) : (
      <Login
        loginSuccess={this.props.loginSuccess}
        onLogin={this.props.onLogin}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});