mmm-projet/components/add/select/selectChefChantier.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 { User } from '@/class/class';
import { getUsers } from "@/services/ressourcesService";

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

type Props = {
    sendChefChantier: (user: User) => void;
    style?: StyleProp<ViewStyle>;
};

export default function SelectChafChantier({style,sendChefChantier , ...otherProps }: Props) {

    const [chefDeChantier, setChefDeChantier] = useState<User>();
    const [isOpen,setIsOpen] = useState(false);
    const [users,setUsers] = useState<User[]>([]);

    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);

    useEffect(() => {
      async function loadData() {
        try {
          const data = await getUsers();//TODO chef de chantier uniquement
          const chefs = data.filter(user => user.role === "chef");
          setUsers(chefs);
        } catch (error) {
          console.error("Erreur lors du chargement :", error);
        }
      }
      loadData();
    }, []);
  

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

    function onPressUser(user: User): void{
      sendChefChantier(user);
      setChefDeChantier(user);
      setIsOpen(false);
    }

    const chefChantierSummary = ({ item }: { item: User }) => {
      if (!item) return null;
      return(
        <View style={{padding:10,width:"100%"}}>
          <ThemedButton lvl={2} style={{padding:10,width:"100%",borderRadius:10}} onPress={() => {onPressUser(item)}}>
            <ThemedText>{item.name}</ThemedText>
            <ThemedText>{item.last_name}</ThemedText>
            <ThemedText>{item.role}</ThemedText>
          </ThemedButton>
        </View>
      )
    }


    const chefChantierSearch = () => {
      return(
        <Modal transparent={true}>
          <View style={styles.overlay}>
            <ThemedView style={styles.overlayView}>
                <ThemedText style={{fontSize: 25}}>Rechercher un chef de chantier :</ThemedText>
                <FlatList
                style={{width:"100%"}}
                  data={users}
                  renderItem={chefChantierSummary}
                  keyExtractor={(_, index) => index.toString()}
                />
                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => setIsOpen(false)}>
                  <ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
                </ThemedButton>
            </ThemedView>
          </View>
        </Modal>
      )
    }

    return(
            <ThemedButton style={style} lvl={1} onPress={() => onPressOpen()}>
                <ThemedText style={styles.centeredText}>{chefDeChantier?chefDeChantier.name+" "+chefDeChantier.last_name:"selectionner un chef de chantier"}</ThemedText>
                {isOpen && chefChantierSearch()}
            </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',
  },
});