import React, { useState } from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity, TextInput } from 'react-native';

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

import AlertasX from './AlertasX';

const ModalResContra = ({ visible, onClose }) => {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const resetPassword = () => {
    setError(''); // Limpiar el mensaje de error al intentar nuevamente

    if (!email) {
      setError('Tienes que ingresar primero tu correo para restablecer la contraseña');
      return;
    }

    firebase.auth().sendPasswordResetEmail(email)
      .then(() => {
        //Manejo de errores hacia el usuario
        setError('Se ha enviado un correo electrónico para restablecer tu contraseña');
        
      })
      .catch((error) => {
        // Manejar errores en el envío del correo
        setError("Error al enviar el correo para restablecer contraseña: " + error.message);
      });
  };
  
  return (
    <Modal transparent={true} animationType="fade" visible={visible}>
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
            <Text style = {styles.TextRC}>Restablecer contraseña</Text>
            <TextInput
            style={styles.InDat}
            placeholder='Ingresa tu correo electrónico'
            onChangeText={(email) => setEmail(email)}
            autoCapitalize="none"
            autoCorrect={false}
            />

            <TouchableOpacity style={styles.btnRC} onPress={resetPassword}>
              <Text style={styles.TextRC}>Restablecer contraseña</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={onClose} style={styles.BtnCerrar}>
                <Text style={styles.TextCerrar}>Cerrar</Text>
            </TouchableOpacity>
        </View>
        <AlertasX
          visible={!!error}
          message={error}
          onClose={() => setError('')}
        />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '(0, 0, 0, 0)',
  },
  modalContent: {
    backgroundColor: "#1c6f88",
    padding: 20,
    borderRadius: 30,
    width: 350,
    height:400,
    top: 123,
  },
  InDat: {
    margin: 20,
    backgroundColor: "#D9D9D9",
    padding: 15,
    borderRadius: 15,
    width: 300,
    right:15
  },
  BtnCerrar: {
    margin: 20,
    backgroundColor: "#6ea9a8",
    padding: 15,
    borderRadius:15,
    width: 130,
    right: -70
  },
  btnRC: {
    margin: 20,
    backgroundColor: "#6ea9a8",
    padding: 15,
    borderRadius:15,
  },
  TextCerrar: {
    color: "#D9D9D9",
    textAlign: "center"
  },
  TextRC: {
    color: "#D9D9D9",
    textAlign: "center"
  },
});

export default ModalResContra;