import React from "react";
import MaterialCommunityIcon from "react-native-vector-icons/MaterialCommunityIcons";
import { NavigationRouteId } from "../NavigationRouteId";
import {
  NavigationScreenConfigProps,
  NavigationTabScreenOptions
} from "react-navigation";
import NavigationService from "../NavigationService";

export const getIconForRouteName = (routeName: string, focused: boolean) => {
  const tabIconSize = 32;
  const iconColor = "#000000";

  let iconName = "help";

  switch (routeName) {
    case NavigationRouteId.BottomTabHome:
      iconName = focused ? "home" : "home-outline";
      break;
    case NavigationRouteId.BottomTabExplore:
      iconName = "magnify";
      break;
    case NavigationRouteId.BottomTabCreate:
      iconName = focused ? "plus-box" : "plus-box-outline";
      break;
    case NavigationRouteId.BottomTabLike:
      iconName = focused ? "heart" : "heart-outline";
      break;
    case NavigationRouteId.BottomTabAccount:
      iconName = focused ? "account" : "account-outline";
    default:
      return null;
  }

  return (
    <MaterialCommunityIcon
      name={iconName}
      color={iconColor}
      size={tabIconSize}
    />
  );
};

export const bottomTabNavigationOptions = ({
  navigation
}: NavigationScreenConfigProps): NavigationTabScreenOptions => {
  return {
    tabBarOnPress: () => {
      const isLoggedIn = true;

      if (!isLoggedIn) {
        return NavigationService.navigate(NavigationRouteId.AuthStackRegister);
      }

      return NavigationService.navigate(navigation.state.routeName);
    }
  };
};