/**
 * @flow
 */
import {
  NativeAppEventEmitter,
  Animated,
  Easing,
  Platform,
} from 'react-native';
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';
import JSPage from '../pages/navigationDemo/JSPage';
import HomePage from '../pages/home/HomePage';
import PolicyPage from '../pages/home/PolicyPage';
import ThemePage from '../pages/changeThemePage';
import ServicePage from '../pages/home/ServicePage';
import UserPage from '../pages/home/UserPage';
import SectionListDemo from '../pages/sectionListDemo';
import NativePage from '../pages/navigationDemo/NativePage';
import InsuranceList from '../pages/InsuranceList';
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 TooltipPage from '../pages/tooltipDemo';
import InsuranceDetail from '../pages/InsuranceList/InsuranceDetail';
import ProductDetailPage from '../pages/insurePage/ProductDetailPage';
import FillPolicyInfoPage from '../pages/insurePage/FillPolicyInfoPage';
import PaymentPage from '../pages/insurePage/PaymentPage';
import PolicyResultPage from '../pages/insurePage/PolicyResultPage';

import { initialRouteName, RootPageInitialName } from '../utils/constants';
import { TabOptions } from '../components/TabOptions';

const TabPage = createBottomTabNavigator(
  {
    HomePage: {
      screen: HomePage,
      navigationOptions: () => TabOptions('首页', 'Ionicons', 'ios-home'),
    },
    PolicyPage: {
      screen: PolicyPage,
      navigationOptions: () => TabOptions('保险', 'Ionicons', 'ios-umbrella'),
    },
    MainPage: {
      screen: ServicePage,
      navigationOptions: () => TabOptions('服务', 'Ionicons', 'ios-apps'),
    },
    ServicePage: {
      screen: UserPage,
      navigationOptions: () => TabOptions('我的', 'Ionicons', 'ios-person', '1'),
    },
  },
  {
    initialRouteName: RootPageInitialName,
    backBehavior: 'none',
    tabBarOptions: {
      tabStyle: {
        marginTop: 2,
      },
      style: {
        height: 49,
      },
      safeAreaInset: {
        //bottom: 'always',
        bottom: 'never',
        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,
  },
  TooltipPage: {
    screen: TooltipPage,
  },
  InsuranceList: {
    screen: InsuranceList,
  },
  InsuranceDetail: {
    screen: InsuranceDetail,
  },
  ProductDetailPage: {
    screen: ProductDetailPage,
  },
  FillPolicyInfoPage: {
    screen: FillPolicyInfoPage,
  },
  PaymentPage: {
    screen: PaymentPage,
  },
  PolicyResultPage: {
    screen: PolicyResultPage,
  },
}, {
  initialRouteName,
  mode: 'card',
  headerMode: 'none',
  defaultNavigationOptions: {
    gesturesEnabled: false,
    gestureDirection: 'default', // inverted
  },
  disableKeyboardHandling: false,
  cardShadowEnabled: true,
  cardOverlayEnabled: true,
  transitionConfig: Platform.OS === 'android' ? () => ({
    transitionSpec: {
      duration: 400,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: (sceneProps) => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;
      const Width = layout.initWidth;
      //沿X轴平移
      const translateX = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [Width, 0, -(Width - 10)],
      });
      //透明度
      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      });
      return { opacity, transform: [{ translateX }] };
    },
  }) : null, //android 设置自定义页面切换动画 左右切换
  onTransitionEnd: () => NativeAppEventEmitter.emit('react_navigation_onTransitionEnd_call'),
});

//export default navigator;

export default createAppContainer(navigator);
