import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import { Entypo } from '@expo/vector-icons'; 
import { Ionicons } from '@expo/vector-icons';

// Import the screens to be used in the navigator
import Denuncias from "./screens/Denuncias";
import Derechos from "./screens/Derechos";
import Analisis from "./screens/Analisis";
import Formulario from "./screens/Formulario";
import Lista from "./screens/Lista";
import Drna from "./screens/Drna";
import { TabBarIOSItem } from "react-native";

const StackDenuncias = createNativeStackNavigator();

function Stacks() {
  return (
    <StackDenuncias.Navigator initialRouteName="DenunciasIni">
      <StackDenuncias.Screen name="Denuncias" component={Denuncias} />
      <StackDenuncias.Screen name="Formulario" component={Formulario} />
      <StackDenuncias.Screen name="Lista" component={Lista} />
      <StackDenuncias.Screen name="Drna" component={Drna} />
    </StackDenuncias.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function Tabs() {
  return (
    <Tab.Navigator initialRouteName="DenunciasIni">
      <Tab.Screen
        name="Denuncias"
        component={Stacks}
        options={{
                tabBarIcon: ({}) => (
                    <Entypo name="megaphone" size={24} color="black" />
                ),
                 headerShown:false
            }} 
      />
      <Tab.Screen 
      name="Derechos" 
      component={Derechos} 
      options={{
      tabBarIcon: ({}) => (
                    <Ionicons name="ios-newspaper-outline" size={24} color="black" />
                )
            }}
      />
      <Tab.Screen 
      name="Analisis" 
      component={Analisis} 
      options={{
                tabBarIcon: ({}) => (
                    <Ionicons name="earth" size={24} color="black" />
                )
            }}   />
    </Tab.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tabs />
    </NavigationContainer>
  );
}