import 'react-native-gesture-handler';
import React, {useLayoutEffect} from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { DefaultTheme } from 'react-native-paper'
import Map from '../screens/Map'
import { MockProvider, useMockState } from '../contexts/MockContext';
import Icon from 'react-native-vector-icons/FontAwesome';
import Account from '../screens/Account';
import LandmarkForm from '../screens/LandmarkForm';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const shouldTabBarDisplay = (route) => {
  const routeName = getFocusedRouteNameFromRoute(route);

  console.log(routeName)

  if (routeName == "LandmarkForm") {
    return false;
  }
   
  return true;
}

const Tabs = createBottomTabNavigator();
const MapStack = createStackNavigator();
const AccountStack = createStackNavigator();
const theme = {
  ...DefaultTheme,
  colors: {
    primary: '#df3f3f',
    accent: 'white',
  },
}

const MapStackNavigator = ({navigation, route}) => {
  const {dispatch, state} = useMockState();
  useLayoutEffect(() => {
    const tabBarShouldDisplay = shouldTabBarDisplay(route);
    if (state.tabBarVisible != tabBarShouldDisplay) {
      dispatch({type: "CHANGE_TABBAR_VISIBILITY", payload: tabBarShouldDisplay})  
    }
    
  }, [navigation, route]);

  return(
    <MapStack.Navigator screenOptions={{headerTransparent: true}} screenOptions={{headerTransparent: true, headerTitle: ""}}>
      <MapStack.Screen name="Map" component={Map} />
      <MapStack.Screen name="LandmarkForm" component={LandmarkForm} />
    </MapStack.Navigator>
  )
}

const AccountStackNavigator = () => {
  return(
    <MapStack.Navigator screenOptions={{headerTransparent: true}} screenOptions={{headerTransparent: true, headerTitle: ""}}>
      <MapStack.Screen name="AccountSummary" component={Account} />
    </MapStack.Navigator>
  )
}

const TabsNavigator = ({route}) => {
  const {state} = useMockState();
  return(
      <Tabs.Navigator 
        initialRouteName="Map" 
        screenOptions={{tabBarVisible: state.tabBarVisible}}
        tabBarOptions={{
          keyboardHidesTabBar: true,
          tabBarLabel: 'Test',
          activeTintColor: "white",
          inactiveTintColor: "lightgrey",
          style: {paddingBottom: 5, backgroundColor: "#df3f3f"}
        }}>
        <Tabs.Screen 
          name="Mapt" 
          component={MapStackNavigator} 
          options={{
            tabBarIcon: ({color}) => (<Icon name="map" size={15} color={color}/>),
          }} />
        <Tabs.Screen 
        name="Account" 
        component={AccountStackNavigator} 
        options={{
            tabBarIcon: ({color}) => (<Icon name="user" size={15} color={color}/>),
        }} />
      </Tabs.Navigator>
  )
}

export default TabsNavigator;