import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { NavigationContainer } from '@react-navigation/native';
import * as React from 'react';
import { RootDrawerParamList, RootStackParamList } from '../models/navigation';
import LinkingConfiguration from './LinkingConfiguration';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
import { HomeScreen, NotFoundScreen, EvokModalScreen, HeatPumpSettingsScreen } from '../screens';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
import { NavigationDarkTheme, NavigationDefaultTheme, COLORS } from '../theme';
import { useDarkMode } from '../hooks';
import { View } from 'native-base';

const Stack = createStackNavigator<RootStackParamList>();

const Navigation = () => {
  const isDarkMode = useDarkMode();
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={isDarkMode ? NavigationDarkTheme : NavigationDefaultTheme}
    >
      <RootNavigator />
    </NavigationContainer>
  );
};

const RootNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Root" component={DrawerNavigator} options={{ headerShown: false }} />
    <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
    <Stack.Group
      screenOptions={{
        presentation: 'transparentModal',
        headerShown: false,
        gestureEnabled: true,
        ...TransitionPresets.ModalPresentationIOS,
      }}
    >
      <Stack.Screen name="EvokModal" component={EvokModalScreen} />
    </Stack.Group>
  </Stack.Navigator>
);

const Drawer = createDrawerNavigator<RootDrawerParamList>();

const DrawerNavigator = () => {
  const isDarkMode = useDarkMode();

  return (
    <Drawer.Navigator
      initialRouteName="Home"
      backBehavior="history"
      screenOptions={{
        headerTintColor: isDarkMode ? COLORS.white : COLORS.gray[900],
        drawerActiveTintColor: COLORS.white,
        drawerActiveBackgroundColor: COLORS.blue[800],
        drawerInactiveTintColor: COLORS.gray[900],
        drawerInactiveBackgroundColor: COLORS.white,
        drawerType: 'slide',
        drawerItemStyle: {
          borderRadius: 12,
          marginTop: 8,
        },
        drawerStyle: {
          backgroundColor: isDarkMode ? COLORS.gray[800] : COLORS.gray[200],
        },
        headerTitleAlign: 'center',
      }}
      drawerContent={props => (
        <View style={{ flex: 1 }} className="p-1">
          <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />
          </DrawerContentScrollView>
        </View>
      )}
    >
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Heat pump',
          drawerIcon: props => <FontAwesome5 name="home" {...props} />,
        }}
      />
      {/* TODO: uncomment when evok screen is ready */}
      {/* <Drawer.Screen
        name="Evok"
        component={EvokScreen}
        options={{ drawerIcon: props => <FontAwesome5 name="robot" {...props} /> }}
      /> */}
      <Drawer.Screen
        name="HeatPumpSettings"
        component={HeatPumpSettingsScreen}
        options={{
          title: 'Advanced configuration',
          drawerLabel: 'Configuration',
          drawerIcon: props => <FontAwesome name="gear" {...props} />,
        }}
      />
    </Drawer.Navigator>
  );
};

export default Navigation;
