import React from 'react';
import { TabNavigator, StackNavigator,TabBarBottom } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import { NavigationComponent } from 'react-native-material-bottom-navigation'
import Feed from '../screens/Feed';
import Feed2 from '../screens/Feed2';
import LoginScreen from '../screens/LoginScreen';
import Settings from '../screens/Settings';
import UserDetail from '../screens/UserDetail';
import Me from '../screens/Me';
import RecScreen from '../screens/ModuleRecView';
import SingleScreen from '../screens/SingleViewRec';
import AddScreen from '../screens/AddRecordScreen';
import RegisterScreen from '../screens/RegisterScreen';
import BlankScreen from '../screens/Blank';
import ProvinceSubScreen from '../screens/ProvinceSubScreen';
import ProvinceMainScreen from '../screens/ProvinceMainScreen';

export const FeedStack = StackNavigator({
  Feed: {
    screen: Feed,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
    },
  },
  RecScreen: {
    screen: RecScreen,
    navigationOptions: ({ navigation }) => ({
      title: `xx`,
    }),
  },
  SingleScreen: {
    screen: SingleScreen,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      tabBarVisible: false,
    },
  },
  AddScreen: {
    screen: AddScreen,
    navigationOptions: ({ navigation }) => ({
      title: "Add Record",
      tabBarVisible: false,
      gesturesEnabled: false,
    }),
  },

  Details: {
    screen: UserDetail,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()}`,
    }),
  },
},
{
  navigationOptions: {
      gesturesEnabled: false,
  },
},

);

export const FeedStack2 = StackNavigator({
  Feed2: {
    screen: Feed2,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      // title: 'Feed 2',
    },
  },
  ProvinceSubScreen: {
    screen: ProvinceSubScreen,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      // title: 'Feed 2',
    },
  },
  SingleScreen: {
    screen: SingleScreen,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      tabBarVisible: false,
    },
  },
  ProvinceMainScreen: {
    screen: ProvinceMainScreen,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      // title: 'Feed 2',
    },
  },
  RecScreen: {
    screen: RecScreen,
    navigationOptions: ({ navigation }) => ({
      title: `Guide`,
    }),
  },
},
{
  navigationOptions: {
      gesturesEnabled: false,
  },
},
);

export const LoginStack = StackNavigator({
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: {
      gesturesEnabled: false,
      title: 'LoginScreen',
    },
  },
});

export const Tabs = TabNavigator({
  Feed: {
    screen: FeedStack,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      tabBarLabel: 'Location',
      tabBarIcon: ({ tintColor }) => <Icon name="home" size={20} color={tintColor} />,
    },
  },
  Feed2: {
    screen: FeedStack2,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      tabBarLabel: 'Search',
      tabBarIcon: ({ tintColor }) => <Icon name="search" size={20} color={tintColor} />,
    },
  },
  Mscreen: {
    screen: BlankScreen,
    navigationOptions: {
      gesturesEnabled: false,
      tabBarLabel: 'Near By',
      title: 'Near By',
      tabBarIcon: ({ tintColor }) => <Icon name="map" size={20} color={tintColor} />,
    },
  },
  Tscreen: {
    gesturesEnabled: false,
    screen: BlankScreen,
    navigationOptions: {
      tabBarLabel: 'Transportation',
      tabBarIcon: ({ tintColor }) => <Icon name="car" size={20} color={tintColor} />,
    },
  },
  // LoginScreen: {
  //   screen: LoginStack,
  //   navigationOptions: {
  //     tabBarLabel: 'LoginScreen',
  //     tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
  //   },
  // },

  Me: {
    screen: Me,
    navigationOptions: {
      gesturesEnabled: false,
      header: null,
      tabBarLabel: 'More',
      tabBarIcon: ({ tintColor }) => <Icon name="user" size={27} color={tintColor} />
    },
  },

}, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  tabBarOptions: {
  bottomNavigationOptions: {
    rippleColor: 'white',
    // shifting: true,
    labelColor: 'black',
    tabs: {
  Feed: {
    barBackgroundColor: '#44a2f0',
    activeLabelColor: 'white',
    activeIcon: <Icon name="home" size={22} color="#ffffff" />


  },
  Feed2: {
    barBackgroundColor: '#44a2f0',
    activeLabelColor: 'white',
    activeIcon: <Icon name="search" size={22} color="#ffffff" />
  },
  Mscreen: {
    barBackgroundColor: '#44a2f0',
    activeLabelColor: 'white',
    activeIcon: <Icon name="map" size={22} color="#ffffff" />
  },
  Tscreen: {
    barBackgroundColor: '#44a2f0',
    activeLabelColor: 'white',
    activeIcon: <Icon name="car" size={22} color="#ffffff" />
  },
  Me: {
    barBackgroundColor: '#44a2f0',
    activeLabelColor: 'white',
    activeIcon: <Icon name="user" size={22} color="#ffffff" />


  }
}
  }

  },
},

);

export const SettingsStack = StackNavigator({
  Settings: {
    screen: Settings,
    navigationOptions: {
      gesturesEnabled: false,
      title: 'Settings',
    },
  },
});
export const LoginNavStack = StackNavigator({
  Home: {
    screen: LoginScreen
  },
  Tabs: {
   screen: Tabs,
 },
 RegisterScreen: {
   screen: RegisterScreen,
   navigationOptions: ({ navigation }) => ({
     title: "Register",

   }),
 }
});