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