import React, {useState, useEffect} from 'react'
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, Dimensions } from 'react-native'

//Importamos firebase desde nuetra configuracion
import { firebase } from "../ConfigFireBa.js/ConfigFireBB"

//Importacion del modal para cerrar sesion
import ModalLogOut from '../Componentes/ModalLogOut'
import { StatusBar } from 'expo-status-bar'


const ScreenMenu = ({navigation}) => {
  const [name, setName] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(false)

  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;

    useEffect(()=> {
      firebase.firestore().collection('Usuarios')
      .doc(firebase.auth().currentUser.uid).get()
      .then((snapshot) => {
        if(snapshot.exists){
          setName(snapshot.data())
        }
        else{
          console.log('El usuario no esta registrado')
        }
      })
    }, [])


  return (
    <SafeAreaView style = {styles.Contenedor}>
      <StatusBar></StatusBar>

      <TouchableOpacity style = {[styles.BtnLogout, {width: windowWidth * 0.3, height: windowHeight * 0.01}]}  
        onPress={() => setIsModalOpen(!isModalOpen)}>
        <ModalLogOut
          isModalOpen={isModalOpen}
          setIsModalOpen={setIsModalOpen}/>
        <Image style = {styles.ImgLogout}
          source={require("../assets/FigIcon/FigInLogg.png")}/>
      </TouchableOpacity>

      <Text style = {[styles.txtname, {width: windowWidth * 0.8, height: windowHeight * 0.04}]}>
          Hola  {name.nombre} bienvenido a
      </Text>

      <Image style = {[styles.ImgTitulo, {width: windowWidth * 0.7, height: windowHeight * 0.25}]}
        source={require("../assets/FigTitulos/FigSubTitulo.png")}/>

      
      
      <TouchableOpacity style = {[styles.BtnUno, {width: windowWidth * 0.40, height: windowHeight * 0.15}]} 
        onPress={() => {navigation.navigate("Acoso Infantil")}}>
        <Text style = {styles.TextUno}> Acoso Infantil </Text>
        <Image style = {[styles.ImgASI, {width: windowWidth * 0.2, height: windowHeight * 0.06}]} 
        source = {require("../assets/FigIcon/aiLogo.png")}/>
      </TouchableOpacity>

      <TouchableOpacity style = {[styles.BtnDos, {width: windowWidth * 0.40, height: windowHeight * 0.15}]}
      onPress={() => {navigation.navigate("Maltrato Infantil")}}>
        <Text style = {styles.TextDos}> Maltrato Infantil</Text>
        <Image style = {[styles.ImgASI, {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
        source = {require("../assets/FigIcon/miLogo.png")}/>
      </TouchableOpacity>

      <TouchableOpacity style = {[styles.BtnTres, {width: windowWidth * 0.40, height: windowHeight * 0.15}]} 
      onPress={() => {navigation.navigate("Directorio")}}>
        <Text style = {styles.TextTres}> Directorio </Text>
        <Image style = {[styles.ImgASI,  {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
        source = {require("../assets/FigIcon/dLogo.png")}/>
      </TouchableOpacity>
            
      <TouchableOpacity style = {[styles.BtnCuatro, {width: windowWidth * 0.40, height: windowHeight * 0.15}]} 
      onPress={() => {navigation.navigate("Abuso Sexual Infantil")}}>
        <Text style = {styles.TextCuatro}> Violencia Sexual Infantil </Text>
        <Image style = {[styles.ImgASIUno, , {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
        source = {require("../assets/FigIcon/axiLogo.png")}/>
      </TouchableOpacity>

      <TouchableOpacity style = {[styles.BtnCinco, {width: windowWidth * 0.40, height: windowHeight * 0.15}]} 
      onPress={() => {navigation.navigate("Protocolos Escolares")}}>
        <Text style = {styles.TextCinco}> Protocolos Escolares </Text>
        <Image style = {[styles.ImgASIDos, {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
        source = {require("../assets/FigIcon/peLogo.png")}/>
      </TouchableOpacity>

      <TouchableOpacity style = {[styles.BtnSeis, {width: windowWidth * 0.40, height: windowHeight * 0.15}]} 
      onPress={() => {navigation.navigate("Sitios de Interes")}}>
        <Text style = {styles.TextSeis}> Sitios de Interes </Text>
        <Image style = {[styles.ImgASI, {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
        source = {require("../assets/FigIcon/sdiLogo.png")}/>
      </TouchableOpacity>

      <TouchableOpacity style = {[styles.BtnSiete, {width: windowWidth * 0.7, height: windowHeight * 0.1}]} 
      onPress={() => {navigation.navigate("¿Quienes Colaboran?")}}>
        <Text style = {styles.TextSiete}>¿Quienes Colaboran?</Text>
        <Image style = {[styles.ImgCo, {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
        source={require("../assets/FigIcon/qcLogo.png")}/>
      </TouchableOpacity>

    </SafeAreaView>

    );
}

const styles = StyleSheet.create({
    Contenedor: {
      backgroundColor: "#519ab4",
      flex: 1,
      justifyContent: "flex-start",
      paddingHorizontal: 20,
  },
    BtnLogout: {//boton y logo para cerrar sesion
      padding:20,
      margin: 10,
      borderRadius: 15,
      backgroundColor: "#519ab4",
      marginLeft: 0,
      top: "1%"
  },
    txtname: {// texto saludando al usuario
      color: "#D9D9D9", 
      fontSize: 15, 
      fontWeight: "bold", 
      textAlign: "center",
      top: "1%",
      right: "-6%"
    },
    ImgTitulo: {
      resizeMode: "center",
      alignSelf: "center"
    },
    ImgLogout:{
        resizeMode: "center", 
        height: 60, 
        width: 40, 
        left: -15,
    },
    BtnUno: {                                 //Estilos del boton AcosoInfantil corregido 
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
    },
    TextUno: { 
        color: "#D9D9D9", 
        textAlign: "center",
        fontWeight: "bold"
    },
    ImgASI: {resizeMode: "center", right: "-16%", top: "10%"},

    BtnDos: {                                 //Estilos del boton MaltratoInfantil
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
  },
    TextDos: { 
      color: "#D9D9D9", 
      left: "5%",
      fontWeight: "bold"
    },

    BtnTres: {                                 //Estilos del boton directorio
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
  },
    TextTres: { color: "#D9D9D9", textAlign: "center", fontWeight: "bold"},

    BtnCuatro: {                                 //Estilos del Boton ViolenciaSexInfantil corregido
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
        right: "-50%",
        top: "-50.60%"
  },
    TextCuatro: { 
      color: "#D9D9D9", 
      top: "-5%", 
      textAlign: "center",
      fontWeight: "bold"
    },
    ImgASIUno: {
      resizeMode: "center", 
      right: "-16%", 
      top: "0%"
    },

    BtnCinco: {                                //Estilos del boton protocolos escolares
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
        alignSelf: "center", 
        top: "-50.55%",
        right: "-25%"
  },
    TextCinco: { 
      color: "#D9D9D9",
      textAlign: "center",
      top: "-5%",
      textAlign:"center",
      fontWeight: "bold"
    },
    ImgASIDos: {
      resizeMode: "center", 
      right: "-16%", 
      top: "0%"
    },
    BtnSeis: {                                //Estilos del boton sitios de Interes
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
        alignSelf: "center", 
        top: "-50.55%",
        right: "-25%"
        
    },
    TextSeis: { 
      color: "#D9D9D9",
      textAlign: "center",
      fontWeight: "bold"
    },

    BtnSiete: {                                //Estilo del boton de colaboradores
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
        alignSelf:"center",
        top: "-50%"
    },
    ImgCo: {resizeMode: "center", right: "-60%", top:"-50%" },
    TextSiete: { color: "#D9D9D9", textAlign: "left", top: "20%", fontWeight: "bold"},


});

export default ScreenMenu;