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





const Drna = () => {
    const [text, onChangeText] = React.useState(null);
    const [number, onChangeNumber] = React.useState(null);
    const [selected, setSelected] = React.useState("");
    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={text}
            placeholder="Nombre"
            placeholderTextColor={"grey"}
        />
        <TextInput
            style={styles.input}
            value={text}
            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={text}
            placeholder="Lugar de los hechos"
            placeholderTextColor={"grey"}
        />
        <TextInput
            style={styles.input2}
            value={text}
            placeholder="Descripcion de los hechos"
            placeholderTextColor={"grey"}
        />
    <TouchableOpacity style={styles.button}>
                <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',
      }
  });