import React, {useState} from 'react'
import { Image, SafeAreaView, StyleSheet, Text, TextInput, TouchableOpacity, View, Dimensions} from 'react-native';
import { useNavigation } from '@react-navigation/native';

//Importacion de firebase
import {firebase} from "../ConfigFireBa.js/ConfigFireBB";

//Importacion de componentes
import AlertasX from '../Componentes/AlertasX';
import ModalResContra from '../Componentes/ModalResContra';

//Importacion de icnos de expo
import { Ionicons } from '@expo/vector-icons';








const ScreenLogg = () => {

  //Constante para mostrar modal de alertas o error al inicar sesion
  const [showAlert, setShowAlert] = useState(false);
  const [alertMessage, setAlertMessage] = useState('');
  

  //Constantes para el uso y guardado de contraseña y email
  const navigation = useNavigation()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  //constantes para mostar constraseña 
  const [muestraContraseña, setMuestraContraseña] = useState(false);

  //constante para abrir y cerrar modal de restabelcmiento de contraseña
  const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);

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


  //constante loginuser para hacerlo llamar cuando se inicie sesion
  loginUser = async (email, password) => {
    try{
      await firebase.auth().signInWithEmailAndPassword(email, password)
    }catch (error) {
      //manejo de errores en el loggin
      let errorMessage = "";
      switch (error.code) {
        case "auth/invalid-email":
          errorMessage += "el correo electrónico o contraseña no son validas.";
          break;
        case "auth/missing-password":
          errorMessage += "La contraseña esta incorreta o esta vacia.";
          break;
        case "auth/invalid-credential":
          errorMessage += "El correo o la contraseña son incorrectas";
          break;
        case "auth/too-many-requests":
          errorMessage += "Demasiados intentos de inicio de sesión. Por favor, inténtalo más tarde.";
          break;
        default:
          errorMessage += error.message;
      }
      setAlertMessage(errorMessage);
      setShowAlert(true);
    }
  };


  //Constante contraseña Olvidada para recuperarla
  const ContraseñaOlvidada = () => {
    setShowResetPasswordModal(true);
  };

  const closeModal = () => {
    setShowResetPasswordModal(false);
  };



  return (
    <SafeAreaView style={styles.container}>

      <Image style = {[styles.ImgUno, {width: windowWidth * 0.8, height: windowHeight * 0.5}]}
      source={require("../assets/FigTitulos/FigTitulo.png")}/>

      <Image style = {[styles.ImgDos, {width: windowWidth * 0.15, height: windowHeight * 0.1}]}
      source={require("../assets/FigIcon/FigInLogg.png")}/>

      <View style = {[styles.containerDos, {width: windowWidth * 0.9, height: windowHeight * 0.56}]}>

        <Text style = {styles.TextUno}>Ingresa tu correo y contraseña</Text>
    
        <TextInput
        style = {[styles.InDat, {width: windowWidth * 0.8, height: windowHeight * -1}]}
        placeholder='Ingresa tu correo electronico'
        onChangeText={(email) => setEmail(email)}
        autoCapitalize="none"
        autoCorrect={false}
        />

        <TextInput
        style = {[styles.InDat2, {width: windowWidth * 0.8, height: windowHeight * -1}]}
        placeholder='Ingresa tu contraseña'
        onChangeText={(password) => setPassword(password)}
        autoCapitalize="none"
        autoCorrect={false}
        secureTextEntry={!muestraContraseña}
        />

        <TouchableOpacity
          style={{ position: 'absolute', right: 55, top: 163 }} 
          onPress={() => setMuestraContraseña(!muestraContraseña)}>
          <Ionicons name={muestraContraseña ? 'eye-off' : 'eye'} size={24} color="grey" />
        </TouchableOpacity>

        <TouchableOpacity style = {styles.Btn1}
        onPress={() => loginUser(email, password)}>
        <Text style = {styles.TextUno}> Iniciar sesión </Text>
        </TouchableOpacity>

        <TouchableOpacity
        onPress={() => navigation.navigate("Registro de Usuario")}>
        <Text style = {styles.TextUno}> ¿No tienes cuenta?{'\n'}    Registrate aqui </Text>
        </TouchableOpacity>

        <TouchableOpacity style = {{margin: 15}}
        onPress={ContraseñaOlvidada}>
        <Text style = {styles.TextUno}>¿Olvidaste tu contraseña?</Text>
        </TouchableOpacity>
        <ModalResContra
        visible={showResetPasswordModal}
        onClose={closeModal}
        />
        <AlertasX
        visible={showAlert}
        message={alertMessage}
        onClose={() => setShowAlert(false)}
        />
      </View>  
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#519ab4",
    justifyContent: "center",
    alignItems: "center",
  },
  containerDos: {
    padding: 10,
    backgroundColor: "#1c6f88",
    borderRadius: 38, 
    alignItems: "center",
    top: "-13%"
  },
  InDat: {//entrada de correo
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    width: "85%",
  },
  InDat2: {//entrada de contraseña
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    width: "85%",
  },
  ImgUno: {
    resizeMode: "center",
  },
  ImgDos: {
    resizeMode: "center",
    top: "-10%"
  },
  Btn1: {//Boton de "iniciar sesion"
    margin: 20,
    backgroundColor: "#6ea9a8",
    padding: 15,
    borderRadius:15
  },
  Btn2: {
    margin: 20,
    backgroundColor: "#6ea9a8",
    padding: 15,
    borderRadius:15
  },
  TextUno: {
    color: "#D9D9D9",
    fontWeight: "400",
  },
});
export default ScreenLogg;
