//Importacion de las dependencias de la navegacion
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
 

//importacion de funciones
import React, {useState, useEffect} from "react";

//importacion de la configuracion de firebase
import {firebase} from "./ConfigFireBa.js/ConfigFireBB";

//importacion de las pantallas/componentes para usuarios no autenticados
import ScreenLogg from "./PantallasApp/ScreenLogg";
import ScreenRegistro from "./PantallasApp/ScreenRegistro";
import ScreenVistaInicio from "./PantallasApp/ScreenVistaInicio";

//Importacion de las pantallas/componentes para usuarios autenticados
import ScreenMenu from "./PantallasApp/ScreenMenu";
import ModalLogOut from "./Componentes/ModalLogOut";
import AcosoInfantil from "./PantallasAppAuth/AcosoInfantil";
import AbusoSexInfantil from "./PantallasAppAuth/AbusoSexInfantil";
import MaltratoInfantil from "./PantallasAppAuth/MaltratoInfantil";
import ProtocolosEscolares from "./PantallasAppAuth/ProtocolosEscolares";
import Directorio from "./PantallasAppAuth/Directorio";
import SitiosDeInteres from "./PantallasAppAuth/SitiosDeInteres";
import Colaboradores from "./PantallasAppAuth/Colaboradores";
import Reportes from "./PantallasAppAuth/Reportes";
import Bienvenida from "./PantallasAppAuth/Bienvenida";

//Comienzo de la navegacion
const Stack = createNativeStackNavigator();

//Aplicacion completa

function App(){
    const [initializing, setInitializing] = useState(true);
    const [user, setUser] = useState();

    //cambios de estado de usuarios
    function onAuthStateChanged(user){
        setUser(user);
        if (initializing) setInitializing(false);
    }

    useEffect(() => {
        const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
        return subscriber;
    }, []);

    if (initializing) return null; 

    if (!user){
        return(
            //pantallas para usuarios no autenticados
            <Stack.Navigator>
                <Stack.Screen
                    name = "Pantalla Inicio"
                    component = {ScreenVistaInicio}
                    options = {{
                        headerShown: false}}
                />
                <Stack.Screen
                    name = "Inicio de Sesion"
                    component = {ScreenLogg}
                    options = {{ 
                        headerShown: false}}
                />

            <Stack.Screen
                    name = "Registro de Usuario"
                    component = {ScreenRegistro}
                    options = {{ 
                        headerShown: false}}
                />
            </Stack.Navigator>
        );
    }

    return(
        //Pantallas para usuarios autenticados
        <Stack.Navigator>
            <Stack.Screen
                name = "Bienvenida"
                component = {Bienvenida}
                options = {{
                    headerShown: false
                }}
            />
           <Stack.Screen
                name = "Menu de inicio"
                component = {ScreenMenu}
                options = {{ 
                    headerShown: false}}
           />
           <Stack.Screen
                name = "Cierre de Sesion"   //Modal
                component = {ModalLogOut}
                options = {{ 
                    headerShown: false}}
           />
           <Stack.Screen
                name = "Acoso Infantil"
                component = {AcosoInfantil}
                options = {{
                    headerShown: false}}
           />
            <Stack.Screen
                name = "Abuso Sexual Infantil"
                component = {AbusoSexInfantil}
                options={{
                    headerShown: false}}
            /> 
            <Stack.Screen
                name = "Maltrato Infantil"
                component = {MaltratoInfantil}
                options={{
                    headerShown: false}}
            />
            <Stack.Screen
                name = "Protocolos Escolares"
                component = {ProtocolosEscolares}
                options={{
                    headerShown: false}}
            />
            <Stack.Screen
                name = "Directorio"
                component = {Directorio}
                options={{
                    headerShown: false}}
            />
            <Stack.Screen
                name = "Sitios de Interes"
                component = {SitiosDeInteres}
                options={{
                    headerShown: false}}
            />
            <Stack.Screen
                name = "¿Quienes Colaboran?"
                component = {Colaboradores}
                options={{
                    headerShown: false}}
            />
            <Stack.Screen
                name = "Reportes"
                component = {Reportes}
                options={{
                    headerShown: false}}
            />
        </Stack.Navigator>
    );
}

export default () => {
    return(
        <NavigationContainer>
            <App/>
        </NavigationContainer>

    )
}
