import React from "react";
import { View } from "react-native";
import { createStackNavigator} from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

/////////SCREENS//////////
import HomeScreen from "../screens/HomeScreen";
import MatchesScreen from "../screens/MatchesScreen";
import MessagesScreen from "../screens/MessagesScreen";
import ProfileScreen from "../screens/ProfileScreen";
/////////////////////////

const HomeStack = createStackNavigator({
    //Burası homescreen'i açar ama diyelimki senin detailscreen diye bir sayfaya geçiş yapman lazım. Ozaman
    //alta onu da eklemen lazım. Şu şekilde;
    HomeScreen
    DetailScreen // bunun gibi
    OtherDetail  // Bitane daha

    // birbirne bağlı olmayan screenler üzerinde hareket etmek için this.props.navigation.navigate('Detail') yerine
    // this.props.navigation.push('Detail') kullanırsan atlatabilirsin.
},{
    navigationOptions:{
        tabBarLabel:'Keşfet',
        tabBarIcon: ({ tintColor }) => (
            <View>
                <Icon style={[{color: tintColor}]} size={25} name={'ios-search'}/>
            </View>),
        activeColor: '#fbf8fd',
        inactiveColor: '#bfa1f6',
        barStyle: { backgroundColor: '#6d6ff4' },
    }
});


const MatchesStack = createStackNavigator({
    MatchesScreen
},{
    navigationOptions:{
        tabBarLabel:'Eşleşmeler',
        tabBarIcon: ({ tintColor }) => (
            <View>
                <Icon style={[{color: tintColor}]} size={25} name={'ios-heart-half'}/>
            </View>),
        activeColor: '#fcfefc',
        inactiveColor: '#ebaabd',
        barStyle: { backgroundColor: '#d13f60' },
    }
});


const MessagesStack = createStackNavigator({
    MessagesScreen
},{
    navigationOptions:{
        header: null,
        tabBarLabel:'Mesajlar',
        tabBarIcon: ({ tintColor }) => (
            <View>
                <Icon style={[{color: tintColor}]} size={25} name={'ios-chatboxes'}/>
            </View>),
        activeColor: '#fbfefd',
        inactiveColor: '#a3c1fa',
        barStyle: { backgroundColor: '#296ff8' },
    }
});


const ProfileStack = createStackNavigator({
    ProfileScreen
},{
    navigationOptions:{
        tabBarLabel:'Mesajlar',
        tabBarIcon: ({ tintColor }) => (
            <View>
                <Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>
            </View>),
        activeColor: '#fdfffd',
        inactiveColor: '#93c4c3',
        barStyle: { backgroundColor: '#1f6d6a' },
    }
});

//Burda da export ederken MainTabNavigation diye const ediyorum bu sayede AppNavigation içinde import edebilirsin.
export const MainTabNavigator = createMaterialBottomTabNavigator({
    HomeStack,
    MatchesStack,
    MessagesStack,
    ProfileStack
},{
    initialRouteName:'HomeStack'
})