mmm-projet/components/selectEngins.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";

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

type Props = {
    sendEngins: (engins: Ressources[]) => void;
    style?: StyleProp<ViewStyle>;
};

export default function SelectEngins({style,sendEngins: sendEngins , ...otherProps }: Props) {

    const { chantier, setChantier} = useChantier();
    const [engins, setEngins] = useState<Ressources[]>([]);
    const [tempStatus, setTempStatus] = useState("");
    const [isOpen,setIsOpen] = useState(false);
    const [openConfirmation,setOpenConfirmation] = useState(false);
    const [listEngins,setListEngins] = useState<Ressources[]>([]);

    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);

    useEffect(() => {
      async function loadData() {
        try {
          const data = await getRessources();//TODO engin/vehicule uniquement
          setListEngins(data);
        } catch (error) {
          console.error("Erreur lors du chargement :", error);
        }
      }
      loadData();
    }, []);
  

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

    function onPressRessource(engin: Ressources): void{
      const exists = engins.some(item => item.name === engin.name);
      if(exists){
        setEngins(prev => prev.filter(item => item.name !== engin.name));
      }
      else{
          setEngins(prevItem => [...prevItem, engin]);
      }
      sendEngins(engins);
      //setIsOpen(false);
    }

    const EnginsSummary = ({ item }: { item: Ressources }) => {
      if (!item) return null;
      const exists = engins.some(i => i.name === item.name);
      return(
        <View style={{padding:10,width:"100%"}}>
          <ThemedButton lvl={exists?2:0} border={exists?3:0} style={{padding:10,width:"100%",borderRadius:10}} onPress={() => {onPressRessource(item)}}>
             <ThemedText>{item.id}</ThemedText>
            <ThemedText>{item.name}</ThemedText>
            <ThemedText>{item.quantity}</ThemedText>
            <ThemedText>{item.type}</ThemedText>
          </ThemedButton>
        </View>
      )
    }


    const EnginsSearch = () => {
      return(
        <Modal transparent={true}>
          <View style={styles.overlay}>
            <ThemedView style={styles.overlayView}>
                <ThemedText style={{fontSize: 25}}>Rechercher un engin :</ThemedText>
                <FlatList
                  style={{width:"100%"}}
                  data={listEngins}
                  renderItem={EnginsSummary}
                  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}>{engins?engins.length+" engin(s) sélectionné":"sélectionner des engin(s)"}</ThemedText>
                {isOpen && EnginsSearch()}
            </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',
  },
  
});