eletrotupi / tcc/ frontend/app/care-actions/medicine.tsx252758fae561de1d43e23deea4bfe302e84f2e78
3.7 KB | 129 lines Raw
1
import {
2
  View,
3
  Text,
4
  StyleSheet,
5
  KeyboardAvoidingView,
6
  ScrollView,
7
  TouchableOpacity,
8
} from "react-native";
9
import { router } from "expo-router";
10
11
import { Button } from "@/components/ui/Button";
12
import { Section, SectionHeader } from "@/components/ui/Sections";
13
import { Spacing, Typography, Colors, BorderRadius, Shadows } from "@/constants/theme";
14
import { Ionicons } from "@expo/vector-icons";
15
import { useMedicineRegimens, useCreateCareAction } from "@/hooks";
16
17
export default function MedicineCareAction() {
18
  const { data: regimensData, isLoading: isLoadingRegimens } = useMedicineRegimens();
19
  const createCareAction = useCreateCareAction();
20
21
  const regimens = regimensData?.regimens ?? [];
22
23
  const handleSelectRegimen = async (regimenId: number) => {
24
    await createCareAction.mutateAsync({
25
      type: 'MEDICINE',
26
      moment: new Date(),
27
      regimenId,
28
    });
29
    router.replace('/(tabs)/actions');
30
  };
31
32
  return (
33
    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>
34
      <ScrollView scrollEventThrottle={16}>
35
        <View style={styles.container}>
36
          <View style={styles.header}>
37
            <Text style={styles.headerTitle}>Qual medicamento?</Text>
38
            <Text style={styles.headerSubtitle}>
39
              Selecione um medicamento existente ou registre um novo
40
            </Text>
41
          </View>
42
43
          {isLoadingRegimens && (
44
            <Text style={styles.loadingText}>Carregando medicamentos...</Text>
45
          )}
46
47
          {!isLoadingRegimens && regimens.length > 0 && (
48
            <Section>
49
              <SectionHeader title="Medicamentos cadastrados" />
50
              {regimens.map((regimen) => (
51
                <TouchableOpacity
52
                  key={regimen.id}
53
                  style={styles.regimenChip}
54
                  activeOpacity={0.7}
55
                  onPress={() => handleSelectRegimen(regimen.id)}
56
                  disabled={createCareAction.isPending}
57
                >
58
                  <Ionicons name="bandage-outline" size={18} color={Colors.light.tint} />
59
                  <View style={styles.regimenChipText}>
60
                    <Text style={styles.regimenChipName}>{regimen.name}</Text>
61
                    <Text style={styles.regimenChipDosage}>{regimen.dosage}</Text>
62
                  </View>
63
                  <Ionicons name="chevron-forward" size={16} color={Colors.light.disabled} />
64
                </TouchableOpacity>
65
              ))}
66
            </Section>
67
          )}
68
69
          <Button
70
            title="Cadastrar outro medicamento"
71
            variant="dashed"
72
            onPress={() => router.push('/care-actions/medicine-new')}
73
          />
74
        </View>
75
      </ScrollView>
76
    </KeyboardAvoidingView>
77
  );
78
}
79
80
const styles = StyleSheet.create({
81
  keyboardView: {
82
    flex: 1,
83
  },
84
  container: {
85
    gap: 24,
86
    paddingHorizontal: Spacing.containerPadding,
87
    paddingVertical: Spacing.sectionGap,
88
    marginBottom: 50,
89
  },
90
  header: {
91
    gap: 8,
92
  },
93
  headerTitle: {
94
    ...Typography.headlineMd,
95
  },
96
  headerSubtitle: {
97
    ...Typography.bodyMd,
98
    color: Colors.light.textSecondary,
99
  },
100
  loadingText: {
101
    ...Typography.bodyMd,
102
    color: Colors.light.textSecondary,
103
    textAlign: 'center',
104
  },
105
  regimenChip: {
106
    flexDirection: 'row',
107
    alignItems: 'center',
108
    backgroundColor: '#fff',
109
    borderRadius: BorderRadius.lg,
110
    padding: Spacing.cardGap,
111
    borderWidth: 1,
112
    borderColor: Colors.light.divider,
113
    gap: 12,
114
    marginBottom: 8,
115
    ...Shadows.sm,
116
  },
117
  regimenChipText: {
118
    flex: 1,
119
    gap: 2,
120
  },
121
  regimenChipName: {
122
    ...Typography.bodyMd,
123
    fontWeight: '600',
124
  },
125
  regimenChipDosage: {
126
    ...Typography.labelSm,
127
    color: Colors.light.textSecondary,
128
  },
129
});