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