import React, { useState } from "react";
import {SafeAreaView,StyleSheet,Text,TextInput,TouchableOpacity,KeyboardAvoidingView,Platform,ScrollView, Image, Dimensions} from "react-native";
import AlertaEM from "../Componentes/AlertaEM";

const Reportes = () => {
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;
    //Constantes para el guardado de info
    const [nombre, setNombre] = useState("");
    const [domicilio, setDomicilio] = useState("");
    const [telefono, setTelefono] = useState("");
    const [descripcion, setDescripcion] = useState("");

  //Constantes para el manejo de errores/en ventana
    const [modalVisible, setModalVisible] = useState(false);
    const [modalMessage, setModalMessage] = useState("");


    //Constante para el envio de correo
    const enviarCorreo = async () => {
        //Condicion de llenado de formulario
        if (!nombre || !domicilio || !telefono || !descripcion) {
            setModalMessage("Por favor, completa todos los campos");
            setModalVisible(true);
            return;
        }
    try {
      const response = await fetch("http://ees.doublerre.com/enviar-correo", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          destinatario: ["procuraduriasedifzac2020@gmail.com", "sesipinna@zacatecas.gob.mx"],
          asunto: "Reporte",
          cuerpo: `Nombre: ${nombre}\nDomicilio: ${domicilio}\nTeléfono: ${telefono}\nDescripción: ${descripcion}`,
        }),
      });

      if (response.ok) {
        setModalMessage("Correo enviado con éxito");
       

        //Manejo de errores
        } else {
        console.error("Error al enviar el correo");
        setModalMessage("Error al enviar el correo");
        }

        setModalVisible(true);
        } catch (error) {
        console.error("Error al enviar la solicitud:", error);
        setModalMessage("Error al enviar el correo");
        setModalVisible(true);
        }
    };
    const closeModal = () => {
        setModalVisible(false);
        setModalMessage("");
      };








    
  return (
    <SafeAreaView style={styles.Contenedor}>
      <Image style = {[styles.ImgTil, {width: windowWidth * 0.87, height: windowHeight * 0.2}]}
            source={require("../assets/FigTitulos/RTR.png")}
       />
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={[styles.ContenedorDos, {width: windowWidth * 0.87, height: windowHeight * 0.89}]}
      >
        <ScrollView
          contentContainerStyle={styles.scrollContainer}
          keyboardShouldPersistTaps="handled"
        >
          <Text style={styles.Text1}> Nombre completo </Text>
          <TextInput
            style={styles.InpNombre}
            placeholder="Ingresa tu nombre completo"
            onChangeText={(text) => setNombre(text)}
          ></TextInput>

          <Text style={styles.Text2}> Domicilio </Text>
          <TextInput
            style={styles.InpDomicilio}
            placeholder="Ingresa tu domicilio"
            onChangeText={(text) => setDomicilio(text)}
          ></TextInput>

          <Text style={styles.Text3}> Teléfono </Text>
          <TextInput
            style={styles.InpTelefono}
            placeholder="Ingresa tu teléfono"
            keyboardType="phone-pad"
            onChangeText={(text) => setTelefono(text)}
          ></TextInput>

          <Text style={styles.Text4}> Descripción del problema </Text>
          <TextInput
            style={styles.InpConText}
            placeholder="A continuación describe el lugar y los hechos que sucitaron"
            multiline={true}
            textAlignVertical="top"
            onChangeText={(text) => setDescripcion(text)}
          ></TextInput>

          <TouchableOpacity
            style={[styles.Btn5, {width: windowWidth * 0.3, height: windowHeight * 0.07}]}
            onPress={enviarCorreo}
          >
            <Text style={styles.TextBtn}>Enviar</Text>
          </TouchableOpacity>

          <AlertaEM visible={modalVisible} message={modalMessage} onClose={closeModal} />
        </ScrollView>
  </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
    Contenedor: {
        backgroundColor: "#519ab4",
        flex: 1,
        justifyContent: "center",
    },
    ImgTil: {
        resizeMode: "center",
        alignSelf: "center",
        justifyContent: "center",

    },
    scrollContainer: {
        flexGrow: 1
    },
    ContenedorDos: {
        alignSelf: "center",
        padding: 10,
        zIndex: 1, 
        backgroundColor: "#1c6f88",
        borderRadius: 38, 
        alignItems: "center",
        top: "-5%"
    },
    InpNombre: {
        backgroundColor: "#D9D9D9",
        margin: 20,
        borderRadius: 10,
        width:300,
        padding:3,
    },
    InpDomicilio: {
        backgroundColor: "#D9D9D9",
        margin: 20,
        borderRadius: 10,
        width:300,
        padding:3,
        
    },
    InpTelefono: {
        backgroundColor: "#D9D9D9",
        margin: 20,
        borderRadius: 10,
        width:300,
        padding:3,
    },
    InpConText: {
        backgroundColor: "#D9D9D9",
        margin: 20,
        borderRadius: 10,
        width:300,
        padding:3,
        height: 280,
    },
    Btn5: { //Boton de enviar
        alignSelf: "center",
        padding: 20,
        margin: "1%",
        borderRadius: 15,
        backgroundColor: "#4AAAAA",
        top: "-1%"
    },
    TextBtn: { //textboton
        color: "#fffacd",
        fontWeight: "bold",
        alignSelf:"center",
    },
    Text1: { //Nombre
        color: "#D9D9D9",
        right: -20,
        fontWeight: "bold",
    },
    Text2: { //Domicilio
        color: "#D9D9D9",
        right: -20,
        fontWeight: "bold",
    },
    Text3: { //Telefono
        color: "#D9D9D9",
        right: -20,
        fontWeight: "bold",
    },
    Text4: { //Descripcion del problema
        color: "#D9D9D9",
        right: -20,
        fontWeight: "bold",
    },
    
});
export default Reportes;
