mmm-projet/components/setStatus.tsx

import { useChantier } from '@/app/ContextChantier';
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';
import { ThemedText } from './themed-text';
import { ThemedView } from "./themed-view";

const { width, height } = Dimensions.get("window");


export default function SetStatus() {

    const { chantier, setChantier} = useChantier();
    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é"]

    function onPressOpen(): void {
        LayoutAnimation.configureNext(
            LayoutAnimation.Presets.easeInEaseOut
        );
        setIsOpen(!isOpen);
    }

    async function onConfirm(): Promise<void> {
        if(chantier == null) return;
        
        setCurrentStatus(tempStatus);
        setIsOpen(false);
        await changeChantierStatus(chantier.id,tempStatus)
        //Il faut changer le UX 
        setChantier({...chantier,etat: tempStatus})

        setOpenConfirmation(false);

        
    }

    function onCancel(): void {
        setOpenConfirmation(false);
        setIsOpen(false);
    }

    function selectSatus(status: string): void {
      setOpenConfirmation(true);
      setTempStatus(status);
    }



    const choice = (status:string, index: number)  => {
      return(
      <Pressable key={index} onPress={() => selectSatus(status)}>
        <View style={styles.satus}>
            <ThemedText style={styles.centeredText}>{status}</ThemedText>
        </View >
      </Pressable>
      );
    };

    const confirmation = () => {
      return(
        <Modal transparent={true} >
          <View style={styles.overlay}>
            <ThemedView style={styles.overlayView}>
              <ThemedText style={{fontSize: 25}}>Changer l'était du chantier en {tempStatus} ?</ThemedText>
              <View style={styles.overlayView}>
                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onConfirm()}>
                  <ThemedText style={{fontSize: 25}}>Confirmer</ThemedText>
                </ThemedButton>
              </View>
              <View style={styles.overlayView}>
                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onCancel()}>
                  <ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
                </ThemedButton>
              </View>
            </ThemedView>
          </View>
        </Modal>
      )
    }

    return(
          <Animated.View layout={LinearTransition.duration(200)} style={styles.windowBox}>
            {isOpen && (<Pressable style={styles.autoClose} onPress={() => setIsOpen(false)}/>)}

            <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}>{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!==currentStatus && choice(str, index)
                        ))}
                    </View>
                  </View>
                  </>
                )}
          </AnimatedThemedView>
        </Animated.View>
      
    )
}

const styles = StyleSheet.create({

  windowBox:{
    zIndex: 2,
    //backgroundColor: '#00FFFF40',
    width:"30%",
    padding: 10,
    paddingLeft: 0,
    //overflow: 'hidden',
  },
  window:{
    borderRadius:15,
    //backgroundColor: '#00FF00',
    overflow: 'hidden',
    position: 'relative',
  },
  autoClose: {
    
    position: 'absolute',
    top: -height,
    left: -width,
    width:width*2,
    height:height*2,
    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
  },
  menu:{
    padding:0,
    flex: 1, 
    //backgroundColor:'#FF00FF',
  },
  list:{
    flex: 1,
    //overflow: 'hidden',
    borderRadius:10,

  },
  satus:{
    padding:10,
    margin:5,
  },
  button:{
    width:'100%',
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height:40,
    justifyContent: 'center',
  },
  centeredText:{
    textAlign: 'center',
  },
  overlay:{
    backgroundColor:'#00000080',
    padding:"5%",
    paddingVertical:"20%",
    width:"100%",
    height:"100%",
  },
  overlayView:{
    borderRadius: 20,
    padding: 20,
    alignItems: "center",
    width: "100%",
    //backgroundColor:'#ff0000',
  },
  buttonValid:{
    //borderWidth: 2,
    width:'100%',
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height:60,
    alignItems: "center",
    justifyContent: 'center',
  },
  
});