import { createMaterialTopTabNavigator } from 'react-navigation';

import SuggestedContactsScreen from '../../screens/contacts/SuggestedContactsScreen';
import RequestsScreen from '../../screens/contacts/RequestsScreen';
import AllContactsScreen from '../../screens/contacts/AllContactsScreen';

const contactsTabBarOptions = {
  upperCaseLabel: false,
  activeTintColor: 'white',
  inactiveTintColor: '#53ACF0',
  lazy: true,
  labelStyle: {
    margin: 1,
    fontSize: 13,
  },
  tabStyle: {
    borderColor: '#53ACF0',
    borderWidth: 1,
    padding: 5
  },
  indicatorStyle: {
    backgroundColor: '#53ACF0',
    bottom: 0,
    height: 50,
  },
  style: {
    backgroundColor: 'transparent',
  }
};

export default createMaterialTopTabNavigator(
  {
    Suggested: SuggestedContactsScreen,
    Unconfirmed: RequestsScreen,
    All: AllContactsScreen
  },
  {
    tabBarOptions: contactsTabBarOptions
  });
