mmm-projet/components/selectMachine.tsx

import { useChantier } from '@/app/ContextChantier';
import { changeChantierStatus } from "@/services/ressourcesService";
import { useEffect, useState } from 'react';
import { Dimensions, FlatList, LayoutAnimation, Modal, Pressable, ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import Animated, { LinearTransition } from 'react-native-reanimated';
import { ThemedButton } from './theme/themed-button';
import { ThemedText } from './theme/themed-text';
import { ThemedView } from "./theme/themed-view";
import { Ressources, User } from '@/class/class';
import { getRessources } from "@/services/ressourcesService";
import MachineSummary from './machineSummary';

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

type RessourcesQte = [Ressources, number];

type Props = {
    sendMachines: (machine: RessourcesQte[]) => void;
    style?: StyleProp<ViewStyle>;
};

export default function SelectMachine({style,sendMachines: sendMachines , ...otherProps }: Props) {

    const { chantier, setChantier} = useChantier();
    const [machines, setMachines] = useState<RessourcesQte[]>([]);
    const [tempStatus, setTempStatus] = useState("");
    const [isOpen,setIsOpen] = useState(false);
    const [openConfirmation,setOpenConfirmation] = useState(false);
    const [listMachines,setListMachines] = useState<Ressources[]>([]);

    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);

    useEffect(() => {
      async function loadData() {
        try {
          const data = await getRessources();
          const ressources = data.filter(user => user.type === "Machine");
          setListMachines(ressources);
        } catch (error) {
          console.error("Erreur lors du chargement :", error);
        }
      }
      loadData();
    }, []);


    useEffect(() => {
      sendMachines(machines);
    }, [machines])
  

    function onPressOpen(): void {
       setIsOpen(!isOpen);
    }

    function getTotalMachine(): number{
      var total = 0;
      machines.forEach(element => {
        total += element[1]
      });
      return total;
    }

    function addMachine(machine: RessourcesQte): void{
      if(machine[1]>0){
        setMachines(prev =>
          prev.some(i => i[0].name === machine[0].name)
            ? prev.map(i =>
                i[0].name === machine[0].name
                  ? [i[0], machine[1]]
                  : i
              )
            : [...prev, machine]
        );
      }
      else{
        setMachines(prev => prev.filter(item => item[0].name !== machine[0].name));
      }
    }




    const MachineSummaryItem = ({ item }: { item: Ressources }) => {
      if (!item) return null;
      const machineQte = machines.find(([r]) => r.name === item.name);
      const qte = machineQte? machineQte[1]:0;
      return(
        <MachineSummary style={{padding:10,width:"100%"}} machine={item} qte={qte} sendMachine={addMachine}></MachineSummary>
      )
    }


    const MachineSearch = () => {
      return(
        <Modal transparent={true}>
          <View style={styles.overlay}>
            <ThemedView style={styles.overlayView}>
                <ThemedText style={{fontSize: 25}}>Rechercher des machines :</ThemedText>
                <FlatList
                  style={{width:"100%"}}
                  data={listMachines}
                  renderItem={MachineSummaryItem}
                  keyExtractor={(_, index) => index.toString()}
                />


                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => setIsOpen(false)}>
                  <ThemedText style={{fontSize: 25}}>Valider</ThemedText>
                </ThemedButton>
            </ThemedView>
          </View>
        </Modal>
      )
    }

    return(
            <ThemedButton style={style} lvl={1} onPress={() => onPressOpen()}>
                <ThemedText style={styles.centeredText}>{machines? getTotalMachine()+" machine(s) sélectionné dont "+ machines.length+" différente":"sélectionner des machine(s)"}</ThemedText>
                {isOpen && MachineSearch()}
            </ThemedButton>
            
      
    )
}

const styles = StyleSheet.create({

  windowBox:{
    zIndex: 2,
    //backgroundColor: '#00FFFF40',
    width:"100%",
    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)',
  },
  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%",
    height: "100%",
    //backgroundColor:'#ff0000',
  },
  buttonValid:{
    //borderWidth: 2,
    width:'100%',
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height:60,
    alignItems: "center",
    justifyContent: 'center',
  },
  
});