import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";

import Screen from "../components/Screen";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import colors from "../config/colors/";
import {
    LineChart,
    BarChart,
    PieChart,
    ProgressChart,
    ContributionGraph,
    StackedBarChart
} from "react-native-chart-kit";

import { FontAwesome5 } from '@expo/vector-icons';
import { MaterialIcons } from "@expo/vector-icons";
import { Dimensions } from "react-native";


const dims = scaleDimsFromWidth(85, 85, 25);


function PluviometerDiaryScreen(props) {
    //Substituir por dados vindos da API
    const school = "Escola registrada do pluviômetro";
    const profile = "Tipo de perfil do usuário";
    const local = "Endereço registrado do pluviômetro"

    const screenWidth = Dimensions.get("window").width;

const data = {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [
        {
            data: [0, 10, 20, 35, 40, 60],
            color: () => colors.gold, // optional
            strokeWidth: 2 // optional
        }
    ],
    legend: ["Registros pluviometricos"] // optional
};
const chartConfig = {
    backgroundGradientFrom: 0,
    backgroundGradientFromOpacity: 0,
    backgroundGradientTo: "#08130D",
    backgroundGradientToOpacity: 0,
    color: () => colors.primary,
    strokeWidth: 2, // optional, default 3
    barPercentage: 0.5,
    useShadowColorFromDataset: false // optional
};



    return (
        <Screen style={styles.container}>
            <View style={{ flex: 1 }}>
                <LineChart
                    data={data}
                    width={screenWidth}
                    height={200}
                    chartConfig={chartConfig}
                    withVerticalLines={false}
                />
            </View>
            <View
                style={{
                    flex: 1,
                    flexDirection: "column",
                    alignContent: "flex-start",
                    justifyContent: "space-between",
                }}>
                {/* Endereço */}
                < View style={{ flex: 1 }}>
                    <View style={styles.location}>
                        <View style={styles.mapIcon}>
                            <MaterialIcons
                                name="location-on"
                                size={28}
                                color="white"
                                alignItems="center"
                                alignContent="center"
                            />
                        </View>
                        <View style={styles.adressText}>
                            <Text style={{
                                fontSize: dimensions.text.default,
                            }}>
                                {local}
                            </Text>
                        </View>
                    </View>
                </View>

                {/* Escola */}
                <View style={{ flex: 1 }}>
                    <View style={styles.location}>
                        <View style={styles.mapIcon}>
                            <FontAwesome5
                                name="university"
                                size={28}
                                color="white"
                                alignItems="center"
                                alignContent="center"
                            />
                        </View>
                        <View style={styles.adressText}>
                            <Text style={{
                                fontSize: dimensions.text.default,
                            }}>
                                {school}
                            </Text>
                        </View>
                    </View>
                </View>

                {/* Usuário */}
                <View style={{ flex: 1 }}>
                    <View style={styles.location}>
                        <View style={styles.mapIcon}>
                            <FontAwesome5
                                name="user-alt"
                                size={28}
                                color="white"
                                alignItems="center"
                                alignContent="center"
                            />
                        </View>
                        <View style={styles.adressText}>
                            <Text style={{
                                fontSize: dimensions.text.default,
                            }}>
                                {profile}
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
        </Screen >
    );
}

const styles = StyleSheet.create({
    container: {
        padding: 10,
        flex: 1,
    },
    image: {
        width: dims.width * 0.8,
        height: dims.height * 0.8,
        justifyContent: "center",
        alignItems: "center",
    },
    label: {
        fontSize: dimensions.text.secondary,
        fontWeight: "bold",
        textAlign: "left",
        color: colors.lightBlue,
    },
    title: {
        fontSize: 20,
        fontWeight: "bold",
        textAlign: "center",
        color: colors.primary,
    },
    location: {
        width: "100%",
        flexDirection: "row",
        alignItems: "flex-start",
        justifyContent: "space-between",
    },
    adressText: {
        flex: 0.90,
        height: "100%",
        flexDirection: "column",
        justifyContent: "center",
        paddingLeft: 5,
    },
    mapIcon: {
        backgroundColor: colors.primary,
        padding: 8,
        width: 20,
        alignItems: "center",
        borderRadius: 5,
        flex: 0.10,
        marginTop: 8,
    },

});

export default PluviometerDiaryScreen;