import PenaltyBanner from '@/components/PenalyBanner' import { useAddTrainMutation } from '@/hooks/mutations/useTrainMutation' import { useAuth } from '@/hooks/useAuth' import { useTrain } from '@/hooks/useTrain' import { TrainTrip } from '@/utils/features/train/trainSlice' import { FontAwesome6 } from '@expo/vector-icons' import { useMemo, useState } from 'react' import { FlatList, StyleSheet } from 'react-native' import { Button, Dialog, Divider, FAB, HelperText, List, Portal, Surface, Text, TextInput } from 'react-native-paper' export default function TrainScreen() { const [addTrainVisible, setAddTrainVisible] = useState(false) const [addTrainUrl, setAddTrainUrl] = useState("") const trainId = useMemo(() => /[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}/.exec(addTrainUrl)?.[0], [addTrainUrl]) const auth = useAuth() const addTrainMutation = useAddTrainMutation({ auth, onPostSuccess: () => setAddTrainVisible(false) }) const trains = useTrain() return ( <Surface style={{ flex: 1 }}> <PenaltyBanner /> <FlatList data={trains.trains} keyExtractor={(train) => train.id} ItemSeparatorComponent={() => <Divider />} renderItem={(item) => <TrainListItem train={item.item} />} /> <FAB icon='plus' style={styles.addTrainButton} onPress={() => setAddTrainVisible(true)} /> <Portal> <Dialog visible={addTrainVisible} onDismiss={() => setAddTrainVisible(false)}> <Dialog.Title>Ajout d'un train</Dialog.Title> <Dialog.Content> <TextInput label="URL de partage RailPlanner" autoComplete='url' inputMode='url' defaultValue={addTrainUrl} multiline={true} onChangeText={setAddTrainUrl} error={!trainId} onEndEditing={() => { if (trainId !== undefined) addTrainMutation.mutate(trainId) }} placeholder="https://eurailapp.com/share/journey?id=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&type=list&brand=interrail" /> <HelperText type='error' visible={!trainId && addTrainVisible}> Le champ doit contenir l'identifiant d'un voyage au format UUID. {trainId} </HelperText> </Dialog.Content> <Dialog.Actions> <Button onPress={() => setAddTrainVisible(false)}>Annuler</Button> <Button onPress={() => { if (trainId !== undefined) addTrainMutation.mutate(trainId) }} disabled={trainId === undefined || addTrainMutation.isPending}>Ajouter</Button> </Dialog.Actions> </Dialog> </Portal> </Surface> ) } const styles = StyleSheet.create({ addTrainButton: { position: 'absolute', right: 25, bottom: 25, } }) function TrainListItem({ train }: { train: TrainTrip }) { const depDateTime = new Date(train.departureTime) const depDate = depDateTime.toLocaleDateString() const depTime = depDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }) const arrDateTime = new Date(train.arrivalTime) const arrTime = arrDateTime.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }) const durationInMinutes = (arrDateTime.getTime() - depDateTime.getTime()) / 1000 / 60 const duration = `${Math.floor(durationInMinutes / 60).toString().padStart(2, '0')}:${Math.floor(durationInMinutes % 60).toString().padStart(2, '0')}` const title = `${train.from} ${depTime} => ${train.to} ${arrTime} (${depDate})` const distanceKm = Math.ceil(train.distance / 1000) const cost = 10 * distanceKm return <> <List.Item title={title} description={<><Text>Durée : {duration}, distance : {distanceKm} km, coût : {cost}</Text> <FontAwesome6 name='coins' /></>} /> </> }