From 6d3001e87c9817856f5d85cccd7baf0c9f525bd1 Mon Sep 17 00:00:00 2001
From: Alexis DRAI <alexis.drai@etu.uca.fr>
Date: Wed, 14 Jun 2023 09:30:04 +0200
Subject: [PATCH] :sparkles: Implement choosing type logics in 'add move'

---
 screens/moves/MoveFormScreen.tsx | 60 +++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/screens/moves/MoveFormScreen.tsx b/screens/moves/MoveFormScreen.tsx
index 6a3b0ad..f052d4b 100644
--- a/screens/moves/MoveFormScreen.tsx
+++ b/screens/moves/MoveFormScreen.tsx
@@ -14,6 +14,7 @@ import { Picker }                                    from "@react-native-communi
 import { ItemValue }                                 from "@react-native-community/picker/typings/Picker";
 import { MoveCategoryName }                          from "../../entities/MoveCategoryName";
 import { TypeName }                                  from "../../entities/TypeName";
+import MultiSelect                                   from "react-native-multiple-select";
 
 type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
 type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;
@@ -39,25 +40,41 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
         schemaVersion: 2
     });
 
+
+    const [selectedWeakAgainst, setSelectedWeakAgainst] = useState<string[]>(move.type.weakAgainst);
+    const [selectedEffectiveAgainst, setSelectedEffectiveAgainst] = useState<string[]>(move.type.effectiveAgainst);
+
+    const handleSelectType = (selectedTypes: string[], setTypes: React.Dispatch<React.SetStateAction<string[]>>, otherSelectedTypes: string[]) => {
+        const uniqueSelectedTypes = Array.from(new Set(selectedTypes));
+        const withoutDuplicatesFromOtherColumn = uniqueSelectedTypes.filter(type => !otherSelectedTypes.includes(type));
+        setTypes(withoutDuplicatesFromOtherColumn);
+    };
+
     const handleSave = () => {
         if (route.params?.move) {
-            (dispatch as AppDispatch)(updateMove(route.params.move.id!, move));
+            (dispatch as AppDispatch)(updateMove(route.params.move.id!, {
+                ...move,
+                type: { ...move.type, weakAgainst: selectedWeakAgainst, effectiveAgainst: selectedEffectiveAgainst }
+            }));
         }
         else {
-            (dispatch as AppDispatch)(createMove(move));
+            (dispatch as AppDispatch)(createMove({
+                ...move,
+                type: { ...move.type, weakAgainst: selectedWeakAgainst, effectiveAgainst: selectedEffectiveAgainst }
+            }));
         }
         navigation.goBack();
     };
 
     return (
         <View style={styles.container}>
-            <Text>Name: </Text>
+            <Text style={styles.label}>Name: </Text>
             <TextInput
                 value={move.name}
                 onChangeText={(text) => setMove({ ...move, name: text })}
                 style={styles.input}
             />
-            <Text>Category: </Text>
+            <Text style={styles.label}>Category: </Text>
             <Picker
                 selectedValue={move.category}
                 style={styles.input}
@@ -68,21 +85,21 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                     <Picker.Item key={value} label={value} value={value}/>
                 )}
             </Picker>
-            <Text>Power: </Text>
+            <Text style={styles.label}>Power: </Text>
             <TextInput
                 value={move.power.toString()}
                 onChangeText={(text) => setMove({ ...move, power: Number(text) })}
                 style={styles.input}
                 keyboardType="numeric"
             />
-            <Text>Accuracy: </Text>
+            <Text style={styles.label}>Accuracy: </Text>
             <TextInput
                 value={move.accuracy.toString()}
                 onChangeText={(text) => setMove({ ...move, accuracy: Number(text) })}
                 style={styles.input}
                 keyboardType="numeric"
             />
-            <Text>Type: </Text>
+            <Text style={styles.label}>Type: </Text>
             <Picker
                 selectedValue={move.type.name}
                 style={styles.input}
@@ -93,7 +110,30 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                     <Picker.Item key={value} label={value} value={value}/>
                 )}
             </Picker>
-            {/*TODO add type.weakAgainst and type.effectiveAgainst columns... Two pickers for that, and the ability to keep adding types in each column.. but user can't put the same type in each column or twice in a column*/}
+            <Text style={styles.label}>Weak Against: </Text>
+            <MultiSelect
+                items={
+                    Object.values(TypeName).map((value) => ({ id: value, name: value }))
+                }
+                uniqueKey="id"
+                onSelectedItemsChange={
+                    (selectedItems) => handleSelectType(selectedItems, setSelectedWeakAgainst, selectedEffectiveAgainst)
+                }
+                selectedItems={selectedWeakAgainst}
+                displayKey="name"
+            />
+            <Text style={styles.label}>Effective Against: </Text>
+            <MultiSelect
+                items={
+                    Object.values(TypeName).map((value) => ({ id: value, name: value }))
+                }
+                uniqueKey="id"
+                onSelectedItemsChange={
+                    (selectedItems) => handleSelectType(selectedItems, setSelectedEffectiveAgainst, selectedWeakAgainst)
+                }
+                selectedItems={selectedEffectiveAgainst}
+                displayKey="name"
+            />
             <Button title="Save" onPress={handleSave}/>
         </View>
     );
@@ -107,7 +147,11 @@ const styles = StyleSheet.create({
     input: {
         backgroundColor: '#CEC',
         borderRadius: 8,
+        height: 32,
     },
+    label: {
+        margin: 8,
+    }
 });
 
 export default MoveFormScreen;