import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView
} from "react-native";
import { SelectList } from "react-native-dropdown-select-list";
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import leyesViolaciones from "./data/leyesViolaciones.json"
import Municipalities from "./data/municipalities.json";


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://172.20.10.2: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 [location, onChangeLocation] = React.useState(null);
  const [municipality, setMunicipality] = React.useState(null);

  return (
    <KeyboardAwareScrollView>
      <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.map((der) => { 
              return(
                der.value
                )
                })
            }
          setSelected={setSelected}
          placeholder="Leyes en violacion"
        />
        <SelectList
          boxStyles={styles.input}
          dropdownStyles={styles.input2}
          data={
            Municipalities.map((der) => { 
              return(
                der
                )
                })
            }
          setSelected={setMunicipality}
          placeholder="Municipio donde ocurrio"
        />
        <TextInput
          style={styles.input}
          value={location}
          onChangeText={onChangeLocation}
          placeholder="Coordenadas de lo ocurrido"
          placeholderTextColor={"grey"}
        />
        <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>
    </KeyboardAwareScrollView>
  );
};

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",
  },
});