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 { PaperProvider } from 'react-native-paper';
import * as NavigationBar from 'expo-navigation-bar';

import { Platform, useColorScheme } from 'react-native';
import { lightTheme, darkTheme } from '@/constants/Colors';
import SettingsScreen from './SettingsScreen';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { TouchableOpacity, View } from 'react-native';
import NullComponent from '@/components/NullComponent';
import { useEffect } from 'react';

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() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Tabs"
        component={TabsNavigator}
        options={{
          headerShown: false,
          drawerItemStyle: { display: 'none' }
        }}
      />
      <Drawer.Group
        screenOptions={{
          headerShown: false,
          drawerActiveTintColor: theme.colors.primary,
          drawerInactiveTintColor: theme.colors.onSurfaceVariant,
          drawerStyle: {
            backgroundColor: theme.colors.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>
  );
}

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

  useEffect(() => {
    if (Platform.OS === 'android') {
      const backgroundColor = theme.colors.primary;
      const foregroundColor = colorScheme === 'dark' ? 'light' : 'dark';

      NavigationBar.setStyle('light');
    }
  }, [colorScheme]);


  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={theme.colors.primary} />
              </TouchableOpacity>
            ),
          })}
        />
      </RootStack.Navigator>
      <StatusBar style={theme.dark ? 'light' : 'dark'} />
    </PaperProvider>
  );
}