/**
 * Created by YiBing on 2017/5/5.
 *
 * 一個StackNavigator詳細的例子，效果：1個主頁面，2個子頁面，每個頁面有三個按鈕，可以跳轉到相應的頁面。
 *
 * React Navigation -- StackNavigator:
 API Definition--StackNavigator(RouteConfigs, StackNavigatorConfig);
 RouteConfigs--StackNavigator({

  // For each screen that you can navigate to, create a new entry like this:
  Profile: {

    // `ProfileScreen` is a React component that will be the main content of the
screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a
`navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is
used:
    path: 'people/:username',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.username}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

 StackNavigatorConfig--
 initialRouteName:預設路由，就是第一個要顯示的頁面。
 initialRouteParams；
 navigationOptions:對所有的screen的預設配置。
 paths：對所有路由的path屬性的預設配置。
 mode：定義渲染風格，enum（card(IOS、Android都可以)、modal（僅IOS））。
 headerMode：enum（float、screen、none）。
 cardStyle：Use this prop to override or extend the default style for an individual
 card in stack.
 transitionConfig：Function to return an object that overrides default screen
 transitions.
 onTransitionStart：Function to be invoked when the card transition animation is about
 to start.
 onTransitionEnd：Function to be invoked once the card transition animation completes.


 Screen Navigation Options:
 title: Generic title that can be used as a fallback for headerTitle and tabBarLabel。
 headerRight：React Element to display on the right side of the header。
 header
 headerTitle
 headerBackTitle：Title string used by the back button on iOS or null to disable
 label. Defaults to scene title。
 headerTruncatedBackTitle
 headerLeft
 headerStyle
 headerTitleStyle
 headerBackTitleStyle
 headerTintColor
 headerPressColorAndroid：Color for material ripple (Android >= 5.0 only)
 gesturesEnabled


 Navigator Props：
 const SomeStack = StackNavigator({
    // config
  });
 <SomeStack
 screenProps={
     // this prop will get passed to the screen components asthis.props.screenProps
   } />
*/

import React from 'react';
import {
    Button,
    ScrollView,
    Text,
} from 'react-native';
import {
    StackNavigator,
} from 'react-navigation';

const MyNavScreen = ({navigation, banner}) => (
    <ScrollView>
        <Text>{banner}</Text>
        <Button
            onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
            title="Go to a profile screen"
        />
        <Button
            onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
            title="Go to a photos screen"
        />
        <Button
            onPress={() => navigation.goBack(null)}
            title="Go back"
        />
    </ScrollView>
);

const MyHomeScreen = ({navigation}) => (
    <MyNavScreen
        banner="Home Screen"
        navigation={navigation}
    />
);
MyHomeScreen.navigationOptions = {
    title: 'Welcome',
};

const MyPhotosScreen = ({navigation}) => (
    <MyNavScreen
        banner={`${navigation.state.params.name}'s Photos`}
        navigation={navigation}
    />
);
MyPhotosScreen.navigationOptions = {
    title: 'Photos',
};

const MyProfileScreen = ({navigation}) => (
    <MyNavScreen
        banner={
            `${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${navigation.state.params.name}'s Profile`
        }
        navigation={navigation}
    />
);

MyProfileScreen.navigationOptions = props => {
    const {navigation} = props;
    const {state, setParams} = navigation;
    const {params} = state;
    return {
        headerTitle: `${params.name}'s Profile!`,
        // Render a button on the right side of the header.
        // When pressed switches the screen to edit mode.
        headerRight: (
            <Button
                title={params.mode === 'edit' ? 'Done' : 'Edit'}
                onPress={() => setParams({ mode: params.mode === 'edit' ? '' : 'edit' })}
            />
        ),
    };
};

const SimpleStack = StackNavigator(
    {
        Profile: {
            path: 'people/:name',
            screen: MyProfileScreen,
        },
        Photos: {
            path: 'photos/:name',
            screen: MyPhotosScreen,
        },
        Home: {
            screen: MyHomeScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default SimpleStack;