mmm-projet/app/(tabs)/gestionnaire_ressource.tsx

import { ThemedText } from "@/components/theme/themed-text";
import { ThemedTextInput } from "@/components/theme/themed-textinput";
import { ThemedView } from "@/components/theme/themed-view";
import Constants from "expo-constants"; //pour connaître la taille de la barre menu de l'OS en haut

import { ThemedButton } from "@/components/theme/themed-button";
import { useLocalSearchParams, useRouter } from "expo-router";
import React, { useEffect, useState } from "react";
import { FlatList, Image, StyleSheet, Text, View } from "react-native";
import { Ressources } from "../../class/class";
import { getReservations, getRessources } from "../../services/ressourcesService";
import SelectChantier from "@/components/selectChantier";
import { useRessources } from "../ContextRessource";
import { useChantier } from "../ContextChantier";
import { getNbUseRessources, getNbUseRessourcesInChantier, isInChantier } from "@/class/utils";
import { useReservations } from "../ContextReservation";

export default function GestionnaireRessource() {
  const [search, setSearch] = useState("");
  const {ressources, setRessources} = useRessources();
  const {reservations, setReservations} = useReservations();
  const {chantier, setChantier} = useChantier();
  const [filterType, setFilterType] = useState("Tout");
  const [showFilterMenu, setShowFilterMenu] = useState(false);
  const [filterChantier, setFilterChantier] = useState(false);
  const router = useRouter();

  useEffect(() => {
    async function loadDataRessources() {
      try {
        const data = await getRessources();
        setRessources(data);
      } catch (error) {
        console.error("Erreur lors du chargement :", error);
      }
    }
    async function loadDataReservations() {
      try {
        const data = await getReservations();
        setReservations(data);
      } catch (error) {
        console.error("Erreur lors du chargement :", error);
      }
    }
    loadDataRessources();
    loadDataReservations();
  }, []);

  const filteredData = ressources.filter((r) => {
    const matchName = r.name.toLowerCase().includes(search.toLowerCase());
    const matchType = filterType === "Tout" || r.type === filterType;
    
    return matchName && matchType && (!filterChantier || (chantier && isInChantier(r,chantier,reservations)));
  });

  const renderRessource = ({ item }: { item: Ressources }) => {
    if (!item) return null;
    return (
      <ThemedView lvl={1} shadow={true} style={styles.card}>
        <Image source={{ uri: item.Image }} style={styles.image} />
        <ThemedView lvl={1} style={styles.info}>
          <ThemedText>Nom : {item.name}</ThemedText>
          <ThemedText>Type : {item.type}</ThemedText>
          <ThemedText>Quantité totale : {item.quantity}</ThemedText>
          <ThemedText>Quantité disponible : {item.quantity-getNbUseRessources(item, reservations)}</ThemedText>
          {filterChantier&&chantier &&
          <ThemedText>Quantité utilisé dans le chantier : {getNbUseRessourcesInChantier(item,chantier, reservations)}</ThemedText>
          }
        </ThemedView>
      </ThemedView>
    );
  };

  

  return (
    <ThemedView lvl={3} style={styles.back}>
      <View style={styles.container}>
        
        <View style={{width:"100%", position: 'absolute'}}>
          <SelectChantier></SelectChantier>
        </View>


        {/* Overlay menu filtre */}
        {showFilterMenu && (
          <ThemedView lvl={2} style={styles.filterMenuOverlay}>
            <ThemedView lvl={5} style={styles.filterMenu}>
              <ThemedText style={styles.filterTitle}>Filtrer par type</ThemedText>
              {["Tout", "Outil", "Machine","Ouvrier"].map((t) => (
                <ThemedButton
                  key={t}
                  lvl={1}
                  shadow={true}
                  style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
                  onPress={async () => {
                    setFilterType(t);
                    setShowFilterMenu(false);
                    const updateRessource = await getRessources();
                    setRessources(updateRessource)
                  }}
                >
                  <ThemedText style={{ textAlign: "center" }}>{t}</ThemedText>
                </ThemedButton>
                
              ))}

                {/* Bouton "Fermer" remplacé */}
                <ThemedButton
                  lvl={1}
                  shadow={true}
                  style={{ padding: 10, borderRadius: 8 }}
                  onPress={() => setShowFilterMenu(false)}
                >
                <ThemedText style={{ textAlign: "center" }}>Fermer</ThemedText>
              </ThemedButton>
            </ThemedView>
          </ThemedView>
        )}

        <FlatList
          data={filteredData}
          renderItem={renderRessource}
          keyExtractor={(_, index) => index.toString()}
          contentContainerStyle={{ paddingBottom: 40 }}
          ListHeaderComponent={
            <View style={styles.header}>
              <ThemedView lvl={1} shadow={true} style={styles.inputBack}>
                <ThemedTextInput
                  lvl={0}
                  style={styles.input}
                  placeholder="Rechercher une ressource..."
                  value={search}
                  onChangeText={setSearch}
                />
              </ThemedView>
              
              {/* Bouton filtre en haut à droite */}
              <View style={{flexDirection: "row", gap:5}}>
                <ThemedButton
                  lvl={1}
                  shadow={true}
                  style={styles.button}
                  onPress={() => setShowFilterMenu(true)}
                >
                  <ThemedText>{`Filtre: ${filterType}`}</ThemedText>
                </ThemedButton>
                <ThemedButton style={styles.button}>
                  <ThemedText onPress={() => setFilterChantier(!filterChantier)}>
                    {filterChantier?"chantier courant":"tous"}
                  </ThemedText>
                </ThemedButton>
              </View>

            </View>
          }
          ListEmptyComponent={
            <ThemedText style={styles.empty}>Aucun résultat trouvé</ThemedText>
          }
        />
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  back:{
    height:"100%",
    width:"100%",
  },
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  header: {
    marginTop: 60,
    marginBottom: 20,
    alignItems: "center",
    paddingHorizontal: 20,
  },
  text: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 10,
  },
  inputBack: {
    width: "100%",
    borderRadius: 10,
    backgroundColor: "transparent",
  },
  input: {
    width: "100%",
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
  },
  card: {
    flexDirection: "row",
    marginHorizontal: 20,
    marginBottom: 15,
    borderRadius: 10,
    padding: 10,
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 8,
    marginRight: 10,
  },
  info: {
    flex: 1,
    justifyContent: "center",
  },
  footer: {
    padding: 20,
  },
  empty: {
    textAlign: "center",
    marginTop: 30,
    color: "#888",
  },
  filterMenuOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 999,
  },
  filterMenu: {
    width: "80%",
    borderRadius: 12,
    padding: 20,
  },
  filterTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center",
  },
  button:{
    padding: 10,
    borderRadius: 8,
    marginTop: 10
  },
});