import React from "react";
import { StyleSheet, View, Text, FlatList } from "react-native";
import firebase from 'firebase/app';




export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      highScoreList: null,
      isDataLoaded: false
    }
  }


  componentDidMount() {
    const hList = [];
    const ref = firebase.database().ref('users')
    ref.orderByChild('hours').on('child_added', function(snapshot) {
      //console.log(snapshot.key + " was " + snapshot.val().hours + " m tall");
      hList.push({
        id: snapshot.key,
        hours: snapshot.val().hours,
        name: snapshot.val().name
      });
      //console.log(JSON.stringify(hList), hList.length);
      //console.log("innafor" + hList)
    });
    //console.log(hList)

    this.setState({
      highScoreList: hList,
      isDataLoaded: true
    })
    //console.log("utafor" + hList)



  }



  render(){
    if(this.state.isDataLoaded && this.state.highScoreList){
      console.log("Innafor state")
      console.log(this.state.highScoreList)

      return (
        <View style={styles.card}>
          {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
        </View>
      )
    }else{
      console.log("State var tom")
      return (<Text> Waiting for data</Text>)
    }
  }

}
//          {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user[key].name}        {user.hours}</Text>)}



const styles = StyleSheet.create({
  card: {
    flex: 1, flexDirection: 'row',
    backgroundColor: "#fff",
    paddingVertical: 20,
    paddingHorizontal: 10,
    borderRadius: 20,
    minHeight: 333
  },
  text: {
    fontSize: 30,
    marginBottom: 20,
    color: "black",
  },
});

/*
export default props => (

  <View style={styles.card}>
    <Text style={styles.text}>{props.children}</Text>
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: "#fff",
    paddingVertical: 20,
    paddingHorizontal: 10,
    borderRadius: 20,
    minHeight: 333
  },
  text: {
    fontSize: 30,
    marginBottom: 20,
    color: "#4A4A4A",
  },
});
*/