/**
 * @flow
 */
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';
import JSPage from '../pages/navigationDemo/JSPage';
import FramePage from '../pages/home/FramePage';
import ThemePage from '../pages/changeThemePage';
import NativeComponentList from '../pages/home/NativeComponentList';
import JSComponentList from '../pages/home/JSComponentList';
import SectionListDemo from '../pages/sectionListDemo';
import NativePage from '../pages/navigationDemo/NativePage';
import ButtonPage from '../pages/buttonDemo';
import WaterList from '../pages/waterListDemo';
import AvatarPage from '../pages/avatarDemo';
import BadgePage from '../pages/badgeDemo';
import CheckBoxPage from '../pages/checkBoxDemo';
import RatingPage from '../pages/ratingDemo';
import SliderPage from '../pages/sliderDemo';

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', '1'),
    },
  },
  {
    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,
  },
  SectionList: {
    screen: SectionListDemo,
  },
  ButtonPage: {
    screen: ButtonPage,
  },
  WaterList: {
    screen: WaterList,
  },
  AvatarPage: {
    screen: AvatarPage,
  },
  BadgePage: {
    screen: BadgePage,
  },
  CheckBoxPage: {
    screen: CheckBoxPage,
  },
  RatingPage: {
    screen: RatingPage,
  },
  SliderPage: {
    screen: SliderPage,
  },
}, {
  initialRouteName,
  headerMode: 'none',
  defaultNavigationOptions: {
    gesturesEnabled: false,
  },
  disableKeyboardHandling: false,
  cardShadowEnabled: true,
  cardOverlayEnabled: true,
});

//export default navigator;

export default createAppContainer(navigator);
