| 1 | import { Text, View, StyleSheet } from "react-native";
|
| 2 | import { MaterialIcons } from "@expo/vector-icons";
|
| 3 | import { Card } from "@/components/ui/Cards";
|
| 4 | import { Badge } from "@/components/ui/Badge";
|
| 5 | import { HistoryCard } from "@/lib/history/types";
|
| 6 | import { Trigger } from "@/lib/api";
|
| 7 | import { Spacing } from "@/constants/theme";
|
| 8 |
|
| 9 | // TODO: Move these to a constant as well
|
| 10 | const TRIGGER_META: Record<
|
| 11 | string,
|
| 12 | { label: string; variant: string; icon: keyof typeof MaterialIcons.glyphMap }
|
| 13 | > = {
|
| 14 | SOCIAL: { label: "Social", variant: "blue", icon: "diversity-1" },
|
| 15 | FAMILY: { label: "Familiar", variant: "green", icon: "family-restroom" },
|
| 16 | HEALTH: { label: "Emocional", variant: "purple", icon: "healing" },
|
| 17 | PHYSICAL: { label: "Físico", variant: "orange", icon: "fitness-center" },
|
| 18 | WORK: { label: "Trabalho", variant: "blue", icon: "work" },
|
| 19 | OTHER: { label: "Outro", variant: "gray", icon: "help-outline" },
|
| 20 | };
|
| 21 |
|
| 22 | type Props = { card: HistoryCard & { raw: Trigger } };
|
| 23 |
|
| 24 | export function TriggerHistoryCard({ card }: Props) {
|
| 25 | const meta = TRIGGER_META[card.raw.category] ?? TRIGGER_META.OTHER;
|
| 26 | const time = new Date(card.timestamp).toLocaleTimeString("pt-BR", {
|
| 27 | hour: "2-digit",
|
| 28 | minute: "2-digit",
|
| 29 | });
|
| 30 |
|
| 31 | return (
|
| 32 | <Card style={styles.card}>
|
| 33 | <View style={styles.row}>
|
| 34 | <View style={[styles.iconWrap, { backgroundColor: "#fff7ed" }]}>
|
| 35 | <MaterialIcons name={meta.icon} size={22} color="#f97316" />
|
| 36 | </View>
|
| 37 | <View style={styles.body}>
|
| 38 | <View style={styles.titleRow}>
|
| 39 | <Text style={styles.title}>Gatilho Identificado</Text>
|
| 40 | <Text style={styles.time}>{time}</Text>
|
| 41 | </View>
|
| 42 | {card.raw.comment ? (
|
| 43 | <Text style={styles.summary} numberOfLines={2}>
|
| 44 | {card.raw.comment}
|
| 45 | </Text>
|
| 46 | ) : null}
|
| 47 | <Badge
|
| 48 | label={meta.label}
|
| 49 | variant={meta.variant as any}
|
| 50 | style={styles.badge}
|
| 51 | />
|
| 52 | </View>
|
| 53 | </View>
|
| 54 | </Card>
|
| 55 | );
|
| 56 | }
|
| 57 |
|
| 58 | const styles = StyleSheet.create({
|
| 59 | card: {
|
| 60 | padding: Spacing.cardGap,
|
| 61 | },
|
| 62 | row: { flexDirection: "row", alignItems: "flex-start", gap: 12 },
|
| 63 | iconWrap: {
|
| 64 | width: 40,
|
| 65 | height: 40,
|
| 66 | borderRadius: 20,
|
| 67 | alignItems: "center",
|
| 68 | justifyContent: "center",
|
| 69 | marginTop: 1,
|
| 70 | },
|
| 71 | body: { flex: 1 },
|
| 72 | titleRow: {
|
| 73 | flexDirection: "row",
|
| 74 | justifyContent: "space-between",
|
| 75 | alignItems: "center",
|
| 76 | marginBottom: 2,
|
| 77 | },
|
| 78 | title: { fontSize: 15, fontWeight: "600" },
|
| 79 | time: { fontSize: 13, opacity: 0.45 },
|
| 80 | summary: { fontSize: 13, opacity: 0.6, lineHeight: 18, marginBottom: 6 },
|
| 81 | badge: { alignSelf: "flex-start", marginTop: 4 },
|
| 82 | });
|