/**
 * @flow
 */
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';
import JSPage from '../jsComponent/JSPage';
import FramePage from '../home/FramePage';
import ThemePage from '../ThemePage';
import NativeComponentList from '../home/NativeComponentList';
import JSComponentList from '../home/JSComponentList';
import NativePage from '../nativeComponent/NativePage';
import { initialRouteName, RootPageInitialName } from '../utils/constants';
import { TabOptions } from '../components/TabOptions';

const TabPage = createBottomTabNavigator(
  {
    HomePage: {
      screen: FramePage,
      navigationOptions: () => TabOptions('框架', 'Ionicons', 'ios-home'),
    },
    MainPage: {
      screen: NativeComponentList,
      navigationOptions: () => TabOptions('原生', 'Ionicons', 'ios-bookmarks'),
    },
    ServicePage: {
      screen: JSComponentList,
      navigationOptions: () => TabOptions('JS', 'Ionicons', 'logo-facebook'),
    },
  },
  {
    initialRouteName: RootPageInitialName,
    backBehavior: 'none',
    tabBarOptions: {
      tabStyle: {
        marginTop: 2,
      },
      style: {
        height: 49,
      },
      safeAreaInset: {
        bottom: 'always',
        top: 'never',
      },
      showLabel: false,
    },
  },
);

TabPage.navigationOptions = ({ navigation }) => {
  const { routes } = navigation.state;
  const params = routes ? routes[navigation.state.index].params : null;

  const headerTitle = params ? params.title : '';
  const headerBackTitle = null;
  const headerTintColor = 'white';

  // 这里的导航都是手动控制的，所以这里设置为null就可以隐藏了。
  const header = null;

  return {
    headerTitle,
    headerBackTitle,
    headerTintColor,
    header,
  };
};

const navigator = createStackNavigator({
  TabPage: {
    screen: TabPage,
  },
  JSPage: {
    screen: JSPage,
  },
  NativePage: {
    screen: NativePage,
  },
  ThemePage: {
    screen: ThemePage,
  },
}, {
  initialRouteName,
  headerMode: 'none',
});

//export default navigator;

export default createAppContainer(navigator);
