import React, {Component} from 'react';
import {
    Platform,
    View,
    I18nManager,
    TouchableOpacity,
    Easing,
    StatusBar,
    Animated,
    DeviceEventEmitter,
    Image
} from 'react-native';
import { StackNavigator,TabNavigator } from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import Icon from 'react-native-vector-icons/Ionicons';
const tabbaroption = {
    activeTintColor:'#f3474b',
    inactiveTintColor: '#7b7b7b',
    showIcon: true,
    style: {
        backgroundColor:'white'
    },
    indicatorStyle: {
        opacity: 0
    },
    iconStyle:{
        paddingTop:0,
        padding:0,
        marginTop:0,
        width:45,
        height:45,
    },
    labelStyle:{
        paddingTop:5,
        marginTop:0,
        padding:0,
    },
    tabStyle: {
        height:Platform.OS==='ios'?90:100,
        alignItems:'center',
        justifyContent:'center',
        padding: 0,
        margin:0,
    }
};
const LeaveListIndex = TabNavigator(
    {
        Name: { screen: Page },
    },
    {
        lazy: true,
        // swipeEnabled: true,
        tabBarPosition: 'bottom',
        animationEnabled: true,
        tabBarOptions: tabbaroption,
        headerLeft:null,
    });
const Routes = {
    Launch:{screen:Launch,},
    Home:{
        screen: Home,
        key: 'Home',
        navigationOptions:{
            headerLeft:(<View style={{paddingLeft:10}}>
                <Icon name={'md-arrow-back'} size={25} color={'transparent'}/>
            </View>),
        }
    },
    xxx:{
        screen:xxx,
        navigationOptions:{
            headerTitle:"xxx",
        }
    },
};
const StackOptions = ({navigation}) => {
    const gesturesEnabled = true;
    const headerStyle= {
            height: 120,
            backgroundColor: '#fb3b3f',
            borderWidth:0,
        borderBottomWidth:0,
    };
    const headerTitleStyle = {
        fontSize: 17,
        color: 'white',
        alignSelf: 'center'
    };
    const headerTintColor= 'white';
    const headerLeft = (
        <TouchableOpacity activeOpacity={1} onPress={()=>{navigation.goBack(null)}}>
            <View style={{paddingLeft:30,paddingRight: 40}}>
                <Image source={AppImages.Home.back}
                       style={{width:20,height: 37}}/>
            </View>
        </TouchableOpacity>
    );
    const headerRight=(<View style={{paddingRight: 30}}>
        <Icon name="md-home" size={25} color={'transparent'}/>
    </View>);
    return {headerLeft,headerRight,headerStyle,gesturesEnabled,headerTitleStyle,headerTintColor,}
};
const change =(data)=>{
    console.log('data',data);
}
const AppNavigator = StackNavigator(
    {
        ...Routes,
        Index: {
            screen: Launch,
        },
    },
    {
        initialRouteName: 'Index',
        headerMode: 'screen',
        transitionConfig: TransitionConfiguration,
        navigationOptions: ({navigation}) => StackOptions({navigation}),
    }
);
export default () => <AppNavigator/>;