import React from "react";
import { Image, TouchableOpacity } from "react-native";
import { Modal, StyleSheet, Text, View, Dimensions} from "react-native";

//Importacion de la navegacion
import { useNavigation } from "@react-navigation/native";

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

//modal con cierre de sesion
const ModalLogOut = ({isModalOpen, setIsModalOpen}) => {
        const navigation = useNavigation();
        const windowWidth = Dimensions.get('window').width;
        const windowHeight = Dimensions.get('window').height;

        const naviScreenVistaInicio = () => {
            navigation.navigate("Pantalla Inicio")
        }
    
    return(
        <>
            <Modal visible={isModalOpen} transparent={true} animationType={"fade"}>
                <View style ={styles.modalContainerStyle}> 
                    <View style={[styles.modalStyle, {width: windowWidth * 0.8, height: windowHeight * 0.08}]}>
                    <TouchableOpacity 
                        style = {styles.BtnOut}
                        onPress={()=> {firebase.auth().signOut()}}>
                        <Text style = {styles.TextUno}>
                            cerrar sesion
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style = {styles.BtnInut} onPress={()=> setIsModalOpen(!setIsModalOpen)}>
                            <Image style = {styles.ImgeX}
                            source={require("../assets/FigIcon/EquisUno.png")}
                            />
                    </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        </>  
    );
}

const styles = StyleSheet.create({
    modalContainerStyle: { 
        flex: 1, 
        justifyContent: "center",
        alignItems: "center"
    },
    TextUno: {
        color: "#D9D9D9",
        fontWeight: "bold", 
        alignSelf: "center",
        fontSize: 15 
    },
    modalStyle: { 
        justifyContent: "center",
        backgroundColor: "#24697D", 
        alignSelf: "center",
        borderRadius:15,
        top:"-45%",
        left:"6.5%"
    },
    ImgeX:{
        resizeMode: "center", 
        alignSelf: "center",
        height: "50%", 
        width: "60%", 

    },
    BtnOut: {
        justifyContent: "center",
        backgroundColor: "#519ab4",
        borderRadius: 15,
        width:"35%",
        height:"75%",
        left: "10%",
        top: "35%"
    },
    BtnInut: {
        justifyContent: "center",
        backgroundColor: "#519ab4",
        borderRadius: 15,
        width:"15%",
        height:"70%",
        left: "78%",
        top: "-37%"
    },

});

export default ModalLogOut;