eletrotupi / tcc/ frontend/components/ui/DailyEnergyWidget.tsx8873ae72bb5c5381f95356155b0c0cb1d4041156
2.4 KB | 95 lines Raw
1
import { ActivityIndicator, StyleSheet, View } from "react-native";
2
import { Text } from "@/components/ui/Text";
3
import { Card } from "@/components/ui/Cards";
4
import { useInsight } from "@/hooks/useInsights.queries";
5
import { Ionicons } from "@expo/vector-icons";
6
import { Typography, Spacing, Colors, BorderRadius } from "@/constants/theme";
7
8
export const DailyEnergyWidget = () => {
9
  const { data: insight, isLoading } = useInsight("DAILY_ENERGY");
10
11
  const metadata = insight?.metadata;
12
13
  const avgEnergy = metadata?.avgEnergy ?? 0;
14
  const peak = metadata?.peak ?? 0;
15
16
  const energyWidth = peak > 0 ? (avgEnergy / peak) * 100 : 0;
17
  const energySummary = () => {
18
    if (avgEnergy < 3) return "Energia baixa";
19
    if (avgEnergy < 5) return "Media baixa";
20
    if (avgEnergy < 7.5) return "Média Alta";
21
    return "Energia alta";
22
  };
23
24
  return (
25
    <Card style={styles.container}>
26
      <View
27
        style={{
28
          flex: 1,
29
          flexDirection: "row",
30
          flexGrow: 0,
31
          paddingVertical: 10,
32
        }}
33
      >
34
        <Ionicons name="flash" size={20} color="#64748B" />
35
36
        <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
37
          Energia
38
        </Text>
39
      </View>
40
41
      <View style={{ flex: 1 }}>
42
        {isLoading ? (
43
          <View style={styles.empty}>
44
            <ActivityIndicator size="small" style={{ paddingBottom: 50 }} />
45
          </View>
46
        ) : insight ? (
47
          <>
48
            <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
49
              {energySummary()}
50
            </Text>
51
52
            <View style={styles.lineTrack}>
53
              <View style={[styles.lineFill, { width: `${energyWidth}%` }]} />
54
            </View>
55
          </>
56
        ) : (
57
          <>
58
            <Text style={styles.empty}>
59
              Não há dados disponíveis para o dia de hoje
60
            </Text>
61
          </>
62
        )}
63
      </View>
64
    </Card>
65
  );
66
};
67
68
const styles = StyleSheet.create({
69
  container: {
70
    flex: 1,
71
    padding: Spacing.cardGap,
72
  },
73
  empty: {
74
    ...Typography.labelSm,
75
    opacity: 0.5,
76
  },
77
  lineTrack: {
78
    height: 6,
79
    backgroundColor: Colors.light.divider,
80
    borderRadius: BorderRadius.full,
81
    marginBottom: 4,
82
    overflow: "hidden",
83
  },
84
  lineFill: {
85
    height: "100%",
86
    backgroundColor: Colors.light.tint,
87
    borderRadius: BorderRadius.full,
88
  },
89
  indicatorGreen: {
90
    color: Colors.light.tint,
91
    fontSize: 11,
92
    fontWeight: 600,
93
    lineHeight: 16.5,
94
  },
95
});