import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import axios from 'axios'

import { ScrollView } from "react-native-gesture-handler";
import { FontAwesome } from "@expo/vector-icons";

// function getDetails(params) {
//     axios.get("http://192.168.8.126:5000/getDetails")
//                 .then(function (response) {
//                   const stngobj = JSON.stringify(response.data)
//                   console.log(stngobj);
//                   alert("Successfully Update")
//                   // navigation.navigate("HomeScreen")
//                   // return response;
//                 })
//                 .catch(function (error) {
//                   console.log(error);
//                   alert("update error")
//                 }) 
// }


export function Leaderboard({ navigation, data }) {

    return (
            
        // <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>\
        
            <ScrollView style={styles.container}>
                {/* <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> */}

            {/* {stngobj.map((stngobj) => */}
                <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>

                    <View style={styles.card}>
                        <View style={styles.left}>
                            <FontAwesome name="user-circle-o" size={75} size={75} color="black" />
                        </View>
                        <View style={styles.right}>
                            <Text >Name: Husmitha Silva</Text>
                            <Text >Earns: 4500</Text>
                            <Text >District: Colombo</Text>
                            <Text >Points: 10</Text>
                        </View>
                    </View>
                </TouchableOpacity>

            {/* )} */}

                <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>

                    <View style={styles.card}>
                        <View style={styles.left}>
                            <FontAwesome name="user-circle-o" size={75} size={75} color="black" />
                        </View>
                        <View style={styles.right}>
                            <Text >Name: Husmitha Silva</Text>
                            <Text >Earns: 4500</Text>
                            <Text >District: Colombo</Text>
                            <Text >Points: 10</Text>
                        </View>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>

                    <View style={styles.card}>
                        <View style={styles.left}>
                            <FontAwesome name="user-circle-o" size={75} size={75} color="black" />
                        </View>
                        <View style={styles.right}>
                            <Text >Name: Husmitha Silva</Text>
                            <Text >Earns: 4500</Text>
                            <Text >District: Colombo</Text>
                            <Text >Points: 5</Text>
                        </View>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>

                    <View style={styles.card}>
                        <View style={styles.left}>
                            <FontAwesome name="user-circle-o" size={75} size={75} color="black" />
                        </View>
                        <View style={styles.right}>
                            <Text >Name: Husmitha Silva</Text>
                            <Text >Earns: 4500</Text>
                            <Text >District: Colombo</Text>
                            <Text >Points: 5</Text>
                        </View>
                    </View>
                </TouchableOpacity>
        {/* </ImageBackground> */}
            </ScrollView>

    )
}

const styles = StyleSheet.create({
    container: {
        // marginTop:20,
        backgroundColor: '#8f8f8f',
        flex: 1,
        color: '#333',
        padding: 10,
        // marginTop: 20,
        // marginBottom: 10,
        width: "100%",
    },
    card: {
        marginBottom: 10,
        marginLeft: "2%",
        width: "96%",
        shadowColor: "lightpink",
        shadowOpacity: 0.9,
        shadowRadius: 1,
        shadowOffset: { width: 3, height: 3 },
        elevation: 5,
        padding: 10,
        flexDirection: "row",
        backgroundColor: '#fc9a44',
        borderRadius: 10,
        marginTop: 10

    },

    right: {
        marginLeft: 50,
    },
    left: {
        marginLeft: 5
    },
    images: {
        // justifyContent: 'center',
        //   alignItems: 'center',
        //   height: '100%',
        height: '100%',
        justifyContent: 'center'
    }
});
