import React, {Component} from 'react' import {AppRegistry,ScrollView,StyleSheet,Text,Alert,View,TouchableHighlight,TextInput,ListView} from 'react-native';
import {Button,Grid,Col,Row } from 'react-native-elements'
import { Actions }from 'react-native-router-flux';
import { getDatabase } from './index.android.js';

let lestachesDataSource: new ListView.DataSource({rowHasChanged: (row1, row2)=>row1 !== row2});

let lestachesitems=[];


export default class Layout1 extends Component {
constructor(props)
{
super(props);
//Constructeur
this.lestachesitemsRef = getDatabase().ref('n0rhl66bifuq3rejl6118k8ppo/lestaches');
this.state
=
{
//Debutdustate
lestachesSource: lestachesDataSource.cloneWithRows(lestachesitems)
Prenom: '',
Nom: '',
}
}

componentDidMount()
{
//DidMount
 this.lestachesitemsRef.on('child_added',	(dataSnapshot)=>{ this.lestachesitems.push({id: dataSnapshot.key,   text: dataSnapshot.val()});  this.setState({lestachesSource:	this.state.lestachesSource.cloneWithRows(this.lestachesitems)}); });
 this.lestachesitemsRef.on('child_removed', (dataSnapshot)=>{ this.lestachesitems = this.lestachesitems.filter((x)=>x.id !== dataSnapshot.key);   this.setState({ lestachesSource: this.state.lestachesSource.cloneWithRows(this.lestachesitems)});});
}

//function
ajouter = () => { if( (this.state.Nom !== '') && (this.state.Prenom !== '')) { this.lestachesitemsRef.push({  Nom: this.state.Nom , Prenom: this.state.Prenom , });  this.setState({ Nom : '' }) , this.setState({ Prenom : '' })   } }
verl2 = () => Actions.Layout2();
renderRowlestaches(rowData) { return ( <TouchableHighlight onPress={() => this.removelestaches(rowData)}><View ><Text >Nom : {rowData.text.Nom}</Text><Text >Prenom : {rowData.text.Prenom}</Text></View></TouchableHighlight>  ); }
removelestaches(rowData) {  Alert.alert( ' Bravo ligne supprimée !');   this.lestachesitemsRef.child(rowData.id).remove();   }


render(){
//Vue
return(
<View
style={{marginTop:
50,
}}>
<ScrollView>
<TextInput style={styles.Dtext} placeholder="Nom" onChangeText={(text) => this.setState({Nom: text})} value={this.state.Nom}/>
<TextInput style={styles.Dtext} placeholder="Prenom" onChangeText={(text) => this.setState({Prenom: text})} value={this.state.Prenom}/>
<Button title='Allerlayout2' onPress={() => this.verl2()} onLongPress={() => this.infol2()} buttonStyle={ styles.View } icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.View }}  />
<Button title='ajouter' onPress={() => this.ajouter()} onLongPress={() => this.infoajout()} buttonStyle={ styles.View } icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.View }}  />
<ListView dataSource={this.state.lestachesSource} renderRow={this.renderRowlestaches.bind(this)} enableEmptySections={true} />
</ScrollView>
</View>
);
}
}


var styles = StyleSheet.create({
//StyleSheet
Dtext: { color: 'green' , fontFamily: 'h1', fontStyle: 'normal', fontWeight: 'normal', textAlign: 'auto', },
View: { backgroundColor: 'red', borderBottomColor: 'red', flexWrap: 'wrap', },
});


AppRegistry.registerComponent( 'Layout1' ,()=> Layout1 );