import React from 'react';
import { Platform, Dimensions } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createDrawerNavigator, NavigationActions } from 'react-navigation';

import TabBarIcon from '../components/modules/TabBarIcon';
import CheckInScreen from '../screens/CheckInScreen';
import MealsScreen from '../screens/MealsScreen';
import WorkoutsScreen from '../screens/WorkoutsScreen';
import ExercisesScreen from '../screens/ExercisesScreen';
import ArticlesScreen from '../screens/ArticlesScreen';
import ProfileScreen from '../screens/ProfileScreen';
import ReferScreen from '../screens/ReferScreen';
import WizardScreen from '../screens/WizardScreen';

import Drawer from '../components/drawer';

const DEVICE_WIDTH = Dimensions.get('window').width;

const CheckInStack = createStackNavigator({
  CheckIn: CheckInScreen,
  ProfileScreen: ProfileScreen,
  WizardScreen: WizardScreen
}, {headerMode: 'none'});

const MealsStack = createStackNavigator({
  Meals: MealsScreen,
}, {headerMode: 'none'});

const WorkoutsStack = createStackNavigator({
  Workouts: WorkoutsScreen,
}, {headerMode: 'none'});

const ExercisesStack = createStackNavigator({
  Exercises: ExercisesScreen,
}, {headerMode: 'none'});

const ArticlesStack = createStackNavigator({
  Articles: ArticlesScreen,
}, {headerMode: 'none'});

CheckInStack.navigationOptions = ({navigation}) => {
  console.log("Check in");
  console.log(navigation);
  let bottomTabVisible = true;
  if(navigation.state.index == 1){
    bottomTabVisible = false;
  }
  return {
    tabBarLabel: 'Check-in',
    tabBarVisible:bottomTabVisible,
    tabBarIcon: ({ focused }) => (
      <TabBarIcon
        focused={focused}
        type={'material'}
        name={'person-add'}
      />
    )
  }

};


MealsStack.navigationOptions = {
  tabBarLabel: 'Meal Plans',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      type={'material-community'}
      name={'nutrition'}
    />
  ),
};

WorkoutsStack.navigationOptions = {
  tabBarLabel: 'Workouts',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      type={'material-community'}
      name={'dumbbell'}
    />
  ),
};

ExercisesStack.navigationOptions = {
  tabBarLabel: 'Exercises',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      type={'ionicon'}
      name={'logo-youtube'}
    />
  ),
};

ArticlesStack.navigationOptions = {
  tabBarLabel: 'Articles',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      type={'entypo'}
      name={'news'}
    />
  ),
  headerVisible: false,
};

export default createBottomTabNavigator({
  CheckInStack,
  MealsStack,
  WorkoutsStack,
  ExercisesStack,
  ArticlesStack,
});