import { DarkTheme, ThemeProvider } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';
import { MD3LightTheme as DefaultTheme, PaperProvider } from 'react-native-paper';
import { useColorScheme } from '@/hooks/useColorScheme';
import SettingsScreen from './SettingsScreen';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { TouchableOpacity } from 'react-native';
import { Colors } from '@/constants/Colors';
import NullComponent from '@/components/NullComponent';

const Drawer = createDrawerNavigator();
const RootStack = createNativeStackNavigator();

function TabsNavigator() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="+not-found" />
    </Stack>
  );
}

function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Tabs"
        component={TabsNavigator}
        options={{
          headerShown: false,
          drawerItemStyle: { display: 'none' }
        }}
      />
      <Drawer.Group
        screenOptions={{
          headerShown: false,
          drawerActiveTintColor: Colors.light.tint,
          drawerInactiveTintColor: Colors.light.text,
          drawerStyle: {
            backgroundColor: Colors.light.background,
          },
        }}
      >
        <Drawer.Screen
          name="SettingsDrawerItem"
          component={NullComponent}
          options={({ navigation }) => ({
            title: 'Settings',
            headerShown: false,
            drawerLabel: 'Settings',
            drawerIcon: ({ color }) => (
              <IconSymbol name="settings" size={24} color={color} />
            ),
          })}
          listeners={({ navigation }) => ({
            drawerItemPress: (e) => {
              e.preventDefault();
              // Navigate to the Settings screen in the root stack
              navigation.getParent()?.navigate('Settings');
              navigation.dispatch({ type: 'CLOSE_DRAWER' });
            },
          })}
        /></Drawer.Group>
    </Drawer.Navigator>
  );
}

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: Colors.light.tint,
    background: Colors.light.background,
    text: Colors.light.text,
    placeholder: Colors.light.tabIconDefault,
    icon: Colors.light.icon,
  },
};

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  if (!loaded) {
    return null;
  }

  return (
    <PaperProvider theme={theme}>
      <RootStack.Navigator>
        <RootStack.Screen
          name="Main"
          component={DrawerNavigator}
          options={{ headerShown: false }}

        />
        <RootStack.Screen
          name="Settings"
          component={SettingsScreen}
          options={({ navigation }) => ({
            headerBackVisible: false,
            gestureEnabled: false,
            headerTitle: 'Settings',
            headerLeft: () => (
              <TouchableOpacity
                onPress={() => {
                  navigation.goBack()
                }}
                style={{
                  marginRight: 15,
                }}
              >
                <IconSymbol name="close" size={24} color={Colors[colorScheme ?? 'light'].icon} />
              </TouchableOpacity>
            ),
          })}
        />
      </RootStack.Navigator>
      <StatusBar style="auto" />
    </PaperProvider>
  );
}