import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Ionicons } from '@expo/vector-icons'; 
import { Link, Tabs } from 'expo-router';
import { Pressable, useColorScheme } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons'; 
import { StatusBar } from 'expo-status-bar';

import Colors from '../../constants/Colors';
import { useEffect } from 'react';
/**
 * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 */
function TabBarIcon(props: {
  name: React.ComponentProps<typeof FontAwesome>['name'];
  color: string;
}) {
  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
}

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors['dark'].tint,
        tabBarStyle:{
          borderTopLeftRadius:20,
          borderTopRightRadius:20,
          position:'absolute',
          width:'98%',
          marginLeft:'1%',
          marginRight:'1%',
          borderColor:Colors['dark'].tabBg,
          paddingTop:'1%',
          height:'8%',
        },
        tabBarLabelStyle:{
          marginBottom:4,
        },
        headerShown: false,
        tabBarHideOnKeyboard: true,
      }}>

      {/* ALL HEADERS HAVE BEEN DISABLED */}
      <Tabs.Screen
        name="(home)"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
          // headerRight: () => (
          //   <Link href="/modal" asChild>
          //     <Pressable>
          //       {({ pressed }) => (
          //         <FontAwesome
          //           name="info-circle"
          //           size={25}
          //           // color={Colors[colorScheme ?? 'light'].text}
          //           color={Colors['dark'].text}
          //           style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
          //         />
          //       )}
          //     </Pressable>
          //   </Link>
          // ),
        }}
      />
      <Tabs.Screen
        name="(map)"
        options={{
          title: 'Map View',
          tabBarIcon: ({ color }) => <MaterialCommunityIcons name="map-search" size={28} color={color} />,
          // headerTitle: 'Local Crime Map',
          // headerRight: () => (
          //   <Link href="/modal" asChild>
          //     <Pressable>
          //       {({ pressed }) => (
          //         <FontAwesome
          //           name="info-circle"
          //           size={25}
          //           // color={Colors[colorScheme ?? 'light'].text}
          //           color={Colors['dark'].text}
          //           style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
          //         />
          //       )}
          //     </Pressable>
          //   </Link>
          // ),
        }}
        />

      <Tabs.Screen
        name='(integrations)'
        options={{
          title: 'More',
          tabBarIcon: ({ color }) => <Ionicons name="apps" size={28} color={color} />,
        }}
      />

      <Tabs.Screen
        name="(profile)"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <Ionicons name="person-outline" size={28} color={color} />,
        }}
        />
    </Tabs>
  );
}