import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, FlatList, Icon, Alert } from 'react-native';
import { List, ListItem } from 'react-native-elements';
import * as Constants from '../Constants';

//  genero la conexion
var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({ name: 'test.db', createFromLocation: '~sqlite.db' })


class Event2 extends Component {

constructor(props) {
    super(props);

    this.state = {
        header: 'Kit de campo en emergencias En la Salud',
        title: 'Enfermedades Infecciosas',
        loading: true,
        data: []
    }

}

componentDidMount() {

    this.getRecords(2);//invoco la funcion y le paso como parametro el numero 2
}

getRecords(categoria) {
      let query = "";
      let params = "";
        query = "SELECT * FROM categoria"; //query

      db.transaction((tx) => {
          tx.executeSql(query, [], (tx, results) => {
            console.log(results);
            var len = results.rows.length;
            let row = results.rows;
            console.log(row);
            console.log(row.item(0).nombre);

            if (len>0) {
                this.setState({
                   data: row, //asignacion de valores
                   loading:false,
                });
                console.log(this.state.data.item);
                var da = JSON.parse(this.state.data.item);
                console.log(da);
                this.state.data.item.forEach(element => {
                    console.log(element);
                });
                console.log(this.state.data.item.row[0]);
            }
            else{
                this.setState({
                    loading:false,
                });
                console.log("No ejecuto la consulta");
              }


        }, (error) => {
            this.setState({
                loading:false,
            });
            console.log("Error " + JSON.stringify(error))
        });
      });

  }

keyExtractor = (item, index) => index.toString() //definir el key

//renderizar los datos
renderItem = ({ index }) => (

    <ListItem
        title={index.item}
        subtitle={index.nombre}
        avatar={{ uri: index.imagen }}
    />

)

render() {
    if (this.state.loading) {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Los se estan cargando...
                </Text>
            </View>);
    } else {
        return (
            <View style={styles.container}>
                <View style={styles.header}>

                </View>
                <View style={{  width: "100%", height: '40%' }}>
                    <View style={{  width: "100%" }}>
                        <Image
                            style={{width: '100%', height: '100%'}}
                            source={require('../images/DiseasesBanner.jpg')}/>
                    </View>
                    <View style={{  width: "100%", backgroundColor: 'orange' }}>
                        <Text style={styles.textCancel}>
                            {this.state.title}
                        </Text>
                    </View>
                </View>
                <View style={{ width: "75%" }}>
                    <FlatList
                        keyExtractor={this.keyExtractor}
                        data={this.state.data}
                        renderItem={this.renderItem}
                    />
                </View>
                <View style={styles.navInferior}>

                </View>

            </View >
        );

    }
}
}

item(i) {
      return rows[i];
    }