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) {
      hList.push({
        id: snapshot.key,
        hours: snapshot.val().hours,
        name: snapshot.val().name
      });
    });

    this.setState({
      highScoreList: hList,
      isDataLoaded: true
    })



  }



  render(){
    if(this.state.isDataLoaded && 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>)
    }
  }

}




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