import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, RouteProp } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import React from 'react';

import { COLOR_PRIMARY, COLOR_SECONDARY, TRANSITION_DURATION } from '../../constants/custom';
import LandingScreen from '../../screens/landing/index';
import LoginScreen from '../../screens/login/index';
import MoreStackScreen, { MoreStackParamList } from './StackScreens/MoreStackScreen';
import ProfileStackScreen, { ProfileStackParamList } from './StackScreens/ProfileStackScreen';
import SearchStackScreen, { SearchStackParamList } from './StackScreens/SearchStackScreen';
import UnitStackScreen, { UnitStackParamList } from './StackScreens/UnitStackScreen';

export type RootStackParamList = {
  Landing: undefined;
  Login: undefined;
  Tabs: undefined;
  Profile: undefined;
  Search: undefined;
  Unit: undefined;
  More: undefined;
} & ProfileStackParamList &
  SearchStackParamList &
  UnitStackParamList &
  MoreStackParamList;

export type NavProps = NativeStackNavigationProp<RootStackParamList>;
export type RouteProps<T extends keyof RootStackParamList> = RouteProp<RootStackParamList, T>;

const Tab = createBottomTabNavigator<RootStackParamList>();
const defaultTabOptions = {
  headerShown: false,
  tabBarLabelStyle: {
    fontSize: 14,
    fontFamily: 'Panton',
  },
};

function HomeTabs() {
  return (
    <Tab.Navigator
      initialRouteName={'Profile'}
      screenOptions={{
        tabBarInactiveTintColor: COLOR_PRIMARY,
        tabBarActiveTintColor: COLOR_SECONDARY,
      }}
    >
      <Tab.Screen
        name="Profile"
        options={{
          tabBarIcon: ({ color }) => {
            return <FontAwesome name="id-badge" size={20} color={color} />;
          },
          tabBarLabel: 'Profil',
          ...defaultTabOptions,
        }}
        listeners={({ navigation }) => ({
          tabPress: () => {
            navigation.navigate('Profile', { screen: 'ProfileScreen', initial: false });
          },
        })}
        component={ProfileStackScreen}
      />
      <Tab.Screen
        name="Search"
        options={{
          tabBarIcon: ({ color }) => {
            return <FontAwesome name="search" size={20} color={color} />;
          },
          tabBarLabel: 'Hledat',
          ...defaultTabOptions,
        }}
        listeners={({ navigation }) => ({
          tabPress: () => {
            navigation.navigate('Search', { screen: 'SearchScreen', initial: false });
          },
        })}
        component={SearchStackScreen}
      />
      <Tab.Screen
        name="Unit"
        options={{
          tabBarIcon: ({ size, color }) => {
            return <FontAwesome name="flag" size={size} color={color} />;
          },
          tabBarLabel: 'Jednotka',
          ...defaultTabOptions,
        }}
        listeners={({ navigation }) => ({
          tabPress: () => {
            navigation.navigate('Unit', { screen: 'UnitScreen', initial: false });
          },
        })}
        component={UnitStackScreen}
      />
      <Tab.Screen
        name="More"
        options={{
          tabBarIcon: ({ size, color }) => {
            return <FontAwesome5 name="buffer" size={size} color={color} />;
          },
          tabBarLabel: 'Více',
          ...defaultTabOptions,
        }}
        listeners={({ navigation }) => ({
          tabPress: () => {
            navigation.navigate('More', { screen: 'MoreScreen', initial: false });
          },
        })}
        component={MoreStackScreen}
      />
    </Tab.Navigator>
  );
}

const RootStack = createNativeStackNavigator<RootStackParamList>();

const Routes = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator
        initialRouteName={'Tabs'}
        screenOptions={{
          animationDuration: TRANSITION_DURATION,
          animation: 'simple_push',
          headerStyle: {
            backgroundColor: '#fff',
          },
          headerTintColor: COLOR_PRIMARY,
        }}
      >
        <RootStack.Screen
          options={{
            headerShown: false,
          }}
          name="Tabs"
          component={HomeTabs}
        />

        <RootStack.Screen
          options={{
            headerShown: false,
          }}
          name={'Landing'}
          component={LandingScreen}
        />
        <RootStack.Screen
          options={{
            headerTitle: 'Kapesní SkautIS',
          }}
          name={'Login'}
          component={LoginScreen}
        />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default Routes;
