import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { createStackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import React from 'react';

import  { primaryColor, secundaryColor  } from '../helpers/colors'

import {
  Partners,
  LoginScreen,
  Pets,
  ProfileScreen,
  PetToAdoptScreen,
  RegisterScreen
} from '../screens';


const ProfileStack = createStackNavigator(
  {
    Profile: {
      screen: ProfileScreen,
      navigationOptions: () => ({
        header: null
      }),
    },
    PetToAdopt: {
      screen: PetToAdoptScreen,
      navigationOptions: () => ({
        title: `Adicionar pet para adoção`
      }),
    },
    Register: {
      screen: RegisterScreen,
      navigationOptions: () => ({
        title: `Registrar`
      }),
    },
    Login: {
      screen: LoginScreen,
      navigationOptions: () => ({
        title: `Login`
      }),
    },
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: secundaryColor,
      },
      headerTintColor: primaryColor,
    },
  }
)

const BottomNavigationStack = createMaterialBottomTabNavigator(
  {
    Profile: {
      screen: ProfileStack,
      navigationOptions: () => ({
        title: `Perfil`,
        tabBarIcon: <Icon name={'person'} size={22} color={ primaryColor } />
      }),
    },
    Pets: {
      screen: Pets,
      navigationOptions: () => ({
        title: `Pets`,
        tabBarIcon: <Icon name={'pets'} size={22} color={ primaryColor } />
      }),
    },
    Partners: {
      screen: Partners,
      navigationOptions: () => ({
        title: `Parceiros`,
        tabBarIcon: <Icon name={'card-giftcard'} size={22} color={ primaryColor } />
      }),
    }
  },
  {
    initialRouteName: 'Profile',
    activeColor: primaryColor,
    inactiveColor: primaryColor,
    barStyle: { backgroundColor: secundaryColor },
  }
);

export { BottomNavigationStack, ProfileStack }