import React from 'react';
import {
    Animated,
    Easing,
    StyleSheet,
} from 'react-native';
import {
    createAppContainer, createStackNavigator,
} from 'react-navigation';

import Welcome from './pages/Welcome';
import HomePage from './pages/Desktop/Index';

const styles = StyleSheet.create({
    iconFont: {
        fontFamily: 'iconfont',
        fontSize: 24,
        color: '#757575'
    },
    iconFontFocused: {
        fontFamily: 'iconfont',
        fontSize: 24,
        color: '#2b90ea'
    }
})

const AppNavigator = createStackNavigator(
    {
        Welcome: {screen: Welcome},
        Main: {screen: HomePage},
    },
    {
        headerMode: 'none',
        mode: 'modal',
        navigationOptions: {
            gesturesEnabled: false,
        },
        transitionConfig: () => ({
            transitionSpec: {
                duration: 300,
                easing: Easing.out(Easing.poly(4)),
                timing: Animated.timing,
            },
            screenInterpolator: sceneProps => {
                const {layout, position, scene} = sceneProps
                const {index} = scene

                const height = layout.initHeight
                const translateY = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [height, 0, 0],
                })

                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                })

                return {opacity, transform: [{translateY}]}
            },
        }),
    }
);
export const RootNavigator = createAppContainer(AppNavigator);

export default RootNavigator;