import React from 'react';
import { Icon, Avatar } from 'react-native-elements'; 
import { createBottomTabNavigator } from 'react-navigation';

import ProfileIcon from '../new/TagferAvatar.js';

const ConnectionsIcon = ({ color }) => (
  <Avatar
    medium
    rounded
    icon={{ name: 'handshake-o', type: 'font-awesome' }}
    activeOpacity={0.7}
    overlayContainerStyle={{ backgroundColor: color }}
    containerStyle={{
      width: 45,
      height: 45
    }}
  />
);

const EventsIcon = ({ size, color }) => (
  <Icon name='calendar-today' type='material-community' size={size} color={color} />
);
const ContactsIcon = ({ size, color }) => (
  <Icon name='group' type='material' size={size} color={color} />
);

const MessagesIcon = ({ size, color }) => (
  <Icon name='message-reply-text' type='material-community' size={size} color={color} />
);

function tabIconSelector(routeName, tintColor) {
  switch (routeName) {
    case 'Events':
      return <EventsIcon size={30} color={tintColor} />;
    case 'Contacts':
      return <ContactsIcon size={30} color={tintColor} />;
    case 'Connections':
      return <ConnectionsIcon size={30} color={tintColor} />;
    case 'Messages':
      return <MessagesIcon size={30} color={tintColor} />;
    case 'Profile':
      return <ProfileIcon size='small' color={tintColor} />;
    default:
      return null;
  }
}

export default function BottomTabNavigator({ Events, Contacts, Connections, Messages, Profile }) {
  if (!Events || !Contacts || !Connections || !Messages || !Profile) {
    console.log('Empty Navigator Supplied to BottomTabNavigator');
  }

  return createBottomTabNavigator({
    Events,
    Contacts,
    Connections,
    Messages,
    Profile
  }, {
    initialRouteName: 'Profile',
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ tintColor }) => {
        const { routeName } = navigation.state;
        return tabIconSelector(routeName, tintColor);
      },
      tabBarOptions: {
        inactiveTintColor: '#8699A7',
        activeTintColor: '#53ACF0',
        style: {
          height: 60
        }
      }
    })
  });
}
