import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
} from "react-native";
import { SelectList } from "react-native-dropdown-select-list";

const postData = (URL, data) => {
  fetch(URL, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);
    })
    .catch((error) => {
      console.error(error);
    });
};

const Drna = () => {
  const URL = "http://192.168.7.178:5001/complaints/add";
  const [name, onChangeName] = React.useState(null);
  const [email, onChangeEmail] = React.useState(null);
  const [place, onChangePlace] = React.useState(null);
  const [selected, setSelected] = React.useState("");
  const [description, onChangeDescription] = React.useState(null);
  const leyesViolaciones = [
    { key: "1", value: "Descarga de águas contaminadas" },
    { key: "2", value: "Olores objetables-fuertes" },
    { key: "3", value: "Tala y/o poda de árboles" },
    { key: "4", value: "Rellenando un bosque" },
    { key: "5", value: "Rellenando una quebrada" },
    { key: "6", value: "Realizando perforaciones en el suelo" },
    { key: "7", value: "Moviendo con maquinaria tierra de un lugar a otro" },
    { key: "8", value: "Peces y/o otros organismos muertos" },
    { key: "9", value: "Tapando la vegetación" },
    { key: "10", value: "Destrucción de humedal" },
    { key: "11", value: "Construcción sospechosa" },
    { key: "12", value: "Otros (vertederos clandestinos, entre otros)" },
  ];

  return (
    <View>
      <Text
        style={{
          fontSize: 30,
          textAlign: "center",
          marginTop: "20%",
        }}
      >
        Formulario DRNA
      </Text>

      <TextInput
        style={styles.input}
        value={name}
        onChangeText={onChangeName}
        placeholder="Nombre"
        placeholderTextColor={"grey"}
      />
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={onChangeEmail}
        placeholder="Email"
        placeholderTextColor={"grey"}
      />
      {/* <TextInput
            style={styles.input}
            value={text}
            placeholder="Fecha"
            placeholderTextColor={"grey"}
        /> */}
      <SelectList
        boxStyles={styles.input}
        dropdownStyles={styles.input2}
        data={leyesViolaciones}
        setSelected={setSelected}
        placeholder="Leyes en violacion"
      />
      <TextInput
        style={styles.input}
        value={place}
        onChangeText={onChangePlace}
        placeholder="Lugar de los hechos"
        placeholderTextColor={"grey"}
      />
      <TextInput
        style={styles.input2}
        value={description}
        placeholder="Descripcion de los hechos"
        onChangeText={onChangeDescription}
        placeholderTextColor={"grey"}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() =>
          postData(URL, {
            name: name,
            email: email,
            place: place,
            complaint_status: "pending",
            complaint_type: selected.valueOf(),
            complaint_description: description,
          })
        }
      >
        <Text style={styles.text}>Someter</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Drna;

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 0.5,
    padding: 10,
    borderRadius: 10,
  },
  input2: {
    height: 100,
    margin: 12,
    borderWidth: 0.5,
    padding: 15,
    borderRadius: 10,
  },
  button: {
    width: 250,
    alignSelf: "center",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: "#009688",
    marginTop: "5%",
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: "bold",
    letterSpacing: 0.25,
    color: "white",
  },
});