overlay confirm en cours

components/setStatus.tsx

@@ -1,5 +1,6 @@
 import { useChantier } from '@/app/ContextChantier';
-import { useCallback, useState } from 'react';
+import { changeChantierStatus } from "@/services/ressourcesService";
+import { useState } from 'react';
 import { Dimensions, LayoutAnimation, Modal, Pressable, StyleSheet, View } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 import { ThemedButton } from './themed-button';
@@ -12,11 +13,11 @@ const { width, height } = Dimensions.get("window");
 export default function SetStatus() {
 
     const { chantier, setChantier} = useChantier();
-    const [currentSatus, setCurrentSearch] = useState("En cours");
+    const [currentStatus, setCurrentStatus] = useState("En cours");
+    const [tempStatus, setTempStatus] = useState("");
     const [isOpen,setIsOpen] = useState(false);
     const [openConfirmation,setOpenConfirmation] = useState(false);
 
-
     const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
 
     const choices = ["En cours","Interrompu","Terminé","Non réalisé"]
@@ -28,10 +29,24 @@ export default function SetStatus() {
         setIsOpen(!isOpen);
     }
 
+    function onConfirm(): void {
+        setOpenConfirmation(false);
+        setCurrentStatus(tempStatus);
+        setIsOpen(false);
+        if(chantier != null){
+          //TODO MAJ la BDD 
+          changeChantierStatus(String(chantier.id),currentStatus)
+        }
+    }
+
+    function onCancel(): void {
+        setOpenConfirmation(false);
+        setIsOpen(false);
+    }
+
     function selectSatus(status: string): void {
       setOpenConfirmation(true);
-        setCurrentSearch(status);
-        setIsOpen(false);
+      setTempStatus(status);
     }
 
 
@@ -46,6 +61,17 @@ export default function SetStatus() {
       );
     };
 
+    const confirmation = () => {
+      return(
+        <Modal style={styles.overlay}>
+          <ThemedView>
+            <ThemedButton onPress={() => onConfirm()}><ThemedText>Confirmer</ThemedText></ThemedButton>
+            <ThemedButton onPress={() => onCancel()}><ThemedText>Annuler</ThemedText></ThemedButton>
+          </ThemedView>
+        </Modal>
+      )
+    }
+
 
     return(
 
@@ -55,17 +81,18 @@ export default function SetStatus() {
 
             <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
               <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
-                <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
+                <ThemedText style={styles.centeredText}>{currentStatus}</ThemedText>
               </ThemedButton>
                 {isOpen && (
                   <>
+                  {openConfirmation && confirmation()}
                   {//TODO : Modal pour confirmer la changement
                   }
                   <View style={styles.menu}>
                     <View style={styles.list}>
                             
                         {choices.map((str, index) => (
-                                str!==currentSatus && choice(str, index)
+                                str!==currentStatus && choice(str, index)
                         ))}
                     </View>
                   </View>
@@ -126,5 +153,9 @@ const styles = StyleSheet.create({
   },
   centeredText:{
     textAlign: 'center',
-  }
+  },
+  overlay:{
+    backgroundColor:'transparent',
+    padding:20,
+  },
 });