import React from 'react';
import {
  CommonActions,
  NavigationContainer as NavigationContainerBase,
} from '@react-navigation/native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { BottomNavigation, Portal, useTheme } from 'react-native-paper';
import { Home, Tags, Settings, AddMeme, AddTag } from './screens';
import { horizontalScale } from './styles';
import { FloatingActionButton } from './components';
import { darkNavigationTheme, lightNavigationTheme } from './theme';

const TabNavigator = () => {
  const TabNavigatorBase = createBottomTabNavigator();
  const [fabVisible, setFabVisible] = React.useState(true);

  return (
    <>
      <Portal.Host>
        <TabNavigatorBase.Navigator
          screenOptions={{
            headerShown: false,
          }}
          tabBar={({ navigation, state, descriptors, insets }) => (
            <BottomNavigation.Bar
              navigationState={state}
              safeAreaInsets={insets}
              onTabPress={({ route, preventDefault }) => {
                const event = navigation.emit({
                  type: 'tabPress',
                  target: route.key,
                  canPreventDefault: true,
                });
                if (event.defaultPrevented) {
                  preventDefault();
                } else {
                  navigation.dispatch({
                    ...CommonActions.navigate(route.name, route.params),
                    target: state.key,
                  });
                }
                route.name === 'Settings'
                  ? setFabVisible(false)
                  : setFabVisible(true);
              }}
              renderIcon={({ route, focused, color }) => {
                const { options } = descriptors[route.key];
                if (options.tabBarIcon) {
                  return options.tabBarIcon({
                    focused,
                    color,
                    size: horizontalScale(20),
                  });
                }
              }}
              getLabelText={({ route }) => {
                const { options } = descriptors[route.key];
                return options.title ?? route.name;
              }}
            />
          )}>
          <TabNavigatorBase.Screen
            name="Home"
            component={Home}
            options={{
              tabBarIcon: ({ color, size }) => (
                <FontAwesome5 name="home" color={color} size={size} />
              ),
            }}
          />
          <TabNavigatorBase.Screen
            name="Tags"
            component={Tags}
            options={{
              tabBarIcon: ({ color, size }) => (
                <FontAwesome5 name="tags" color={color} size={size} />
              ),
            }}
          />
          <TabNavigatorBase.Screen
            name="Settings"
            component={Settings}
            options={{
              tabBarIcon: ({ color, size }) => (
                <FontAwesome5 name="cog" color={color} size={size} />
              ),
            }}
          />
        </TabNavigatorBase.Navigator>
        <FloatingActionButton visible={fabVisible} />
      </Portal.Host>
    </>
  );
};

const NavigationContainer = () => {
  const StackNavigatorBase = createNativeStackNavigator();
  const theme = useTheme();

  return (
    <NavigationContainerBase
      theme={theme.dark ? darkNavigationTheme : lightNavigationTheme}>
      <StackNavigatorBase.Navigator screenOptions={{ headerShown: false }}>
        <StackNavigatorBase.Screen name="Main" component={TabNavigator} />
        <StackNavigatorBase.Screen
          name="Add Meme"
          component={AddMeme}
          options={{ animation: 'slide_from_bottom' }}
        />
        <StackNavigatorBase.Screen
          name="Add Tag"
          component={AddTag}
          options={{ animation: 'slide_from_bottom' }}
        />
      </StackNavigatorBase.Navigator>
    </NavigationContainerBase>
  );
};

export default NavigationContainer;