/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, Image } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

import Home from "./src/pages/Home/index";
import InsuranceCircle from "./src/pages/InsuranceCircle/index";
import InsuranceChurch from "./src/pages/InsuranceChurch/index";
import Mine from "./src/pages/Mine/index";
import Login from "./src/pages/Login";
import AllProduct from "./src/pages/Home/allProduct";
import CommonWebView from "./src/Components/CommonWebView";
import ProductTemplate from "./src/Components/ProductTemplate";
import ArticleTemplate from "./src/Components/articleTemplate";
import Details from "./src/pages/InsuranceCircle/details";

// 底部导航栏配置，但也只是作为一个页面，加载到StackNavigator成为第一个页面
const MainTabBar = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "首页",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_home_s.png")} />
        ) : (
          <Image source={require("./src/assets/tabbar/ic_home_n.png")} />
        )
    }
  },
  InsuranceCircle: {
    screen: InsuranceCircle,
    navigationOptions: {
      title: "保圈",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_circle_s.png")} />
        ) : (
          <Image source={require("./src/assets/tabbar/ic_circle_n.png")} />
        )
    }
  },
  InsuranceChurch: {
    screen: InsuranceChurch,
    navigationOptions: {
      title: "保堂",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_umbrella_s.png")} />
        ) : (
          <Image source={require("./src/assets/tabbar/ic_umbrella_n.png")} />
        )
    }
  },
  Mine: {
    screen: Mine,
    navigationOptions: {
      title: "我的",
      tabBarIcon: ({ focused }) =>
        focused ? (
          <Image source={require("./src/assets/tabbar/ic_mine_s.png")} />
        ) : (
          <Image source={require("./src/assets/tabbar/ic_mine_n.png")} />
        )
    }
  }
},{
  swipeEnabled: true,
  tabBarOptions: {
    activeTintColor: "#1B9341"
  }
});

const ProtectGod = StackNavigator(
  {
    MainTabBar: { screen: MainTabBar },
    Home: { screen: Home },
    InsuranceCircle: { screen: InsuranceCircle },
    InsuranceChurch: { screen: InsuranceChurch },
    Mine: { screen: Mine },
    Login: { screen: Login },
    AllProduct: {
      screen: AllProduct,
      navigationOptions: { headerTitle: "全部产品" }
    },
    CommonWebView: { screen: CommonWebView },
    ProductTemplate: { screen: ProductTemplate },
    ArticleTemplate: { screen: ArticleTemplate },
    Details: { screen: Details }
  },{
    navigationOptions: {
      // headerTintColor: "blue",
      headerBackTitle: "返回",
      headerStyle: {
        backgroundColor: "white"
      }
    }
  }
);

const styles = StyleSheet.create(
  
);

AppRegistry.registerComponent("ProtectGod", () => ProtectGod);