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

import HomeMain from '../Pages/Home/Main';
import HomeJoin from '../Pages/Home/Join';

import Menu from './Menu';
import Header from '../components/Header';
import { Drawer } from '../components/';
import Icon from 'react-native-vector-icons/Ionicons';

const transitionConfig = (transitionProps, prevTransitionProps) => ({
  transitionSpec: {
    duration: 400,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
  },
  screenInterpolator: sceneProps => {
    const { layout, position, scene } = sceneProps;
    const thisSceneIndex = scene.index
    const width = layout.initWidth

    const scale = position.interpolate({
      inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
      outputRange: [4, 1, 1]
    })
    const opacity = position.interpolate({
      inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
      outputRange: [0, 1, 1],
    })
    const translateX = position.interpolate({
      inputRange: [thisSceneIndex - 1, thisSceneIndex],
      outputRange: [width, 0],
    })

    const scaleWithOpacity = { opacity }
    const screenName = "Search"

    if (screenName === transitionProps.scene.route.routeName ||
      (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)) {
      return scaleWithOpacity;
    }
    return { transform: [{ translateX }] }
  }
})

const FooterConfig = {
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'grey',
    style: {
      backgroundColor: 'white',
      borderTopWidth: 0,
      shadowOffset: { width: 5, height: 3 },
      shadowColor: 'black',
      shadowOpacity: 0.5,
      elevation: 5
    }
  }
}

const HomeMainStack = createStackNavigator({
  Home: {
    screen: HomeMain,
    navigationOptions: ({navigation}) => ({
      header: <Header search title="Home" navigation={navigation} />,
    })
  }
},
{
  cardStyle: {
    backgroundColor: '#EEEEEE', //this is the backgroundColor for the app
  },
  transitionConfig,
});

const HomeJoinStack = createStackNavigator({
  Home: {
    screen: HomeJoin,
    navigationOptions: ({navigation}) => ({
      header: <Header search title="Ajak Join" navigation={navigation} />,
    })
  }
},
{
  cardStyle: {
    backgroundColor: '#EEEEEE', //this is the backgroundColor for the app
  },
  transitionConfig,
});

const RootStack = createBottomTabNavigator({
  Home: {
     screen: HomeMain,
     navigationOptions: {
       tabBarLabel: 'Home',
       tabBarIcon: ({ tintColor }) => (
         <Icon name={Platform.OS === "ios" ? "ios-close-circle" : "md-close-circle"} color={tintColor} size={24} />
       )
     }
   },
   Join: {
    screen: HomeJoin,
    navigationOptions: {
      tabBarLabel: 'Join',
      tabBarIcon: ({ tintColor }) => (
        <Icon name={Platform.OS === "ios" ? "ios-close-circle" : "md-close-circle"} color={tintColor} size={24} />
      )
    }
  },
 },
 FooterConfig
 )

 const Stack = createStackNavigator({
  Home: {
    screen: RootStack,
    navigationOptions: ({navigation}) => ({
      header: <Header search title="Home" navigation={navigation} />,
    })
  }
},
{
  cardStyle: {
    backgroundColor: '#EEEEEE', //this is the backgroundColor for the app
  },
  transitionConfig,
});

console.log(RootStack)


const AppStack = createDrawerNavigator(
  {

    Home: {
      screen: RootStack,
      navigationOptions: {
        drawerLabel: ({focused}) => (
          <Drawer focused={focused}  title="Home" />
        )
      }
    },
    // Components: {
    //   screen: RootStack,
    //   navigationOptions: {
    //     drawerLabel: ({focused}) => (
    //       <Drawer focused={focused}  title="Ajak Paketan" />
    //     )
    //   }
    // },

  },
  Menu,
);
const AppContainer = createAppContainer(Stack);
export default AppContainer;