mmm-projet/components/selectChantier.tsx

import { useState, useEffect } from "react";
import {
  Button,
  GestureResponderEvent,
  Pressable,
  ScrollView,
  StyleSheet,
  View,
  LayoutAnimation,
} from "react-native";
import { ThemedTextInput } from "./themed-textinpute";
import { ThemedView } from "./themed-view";
import { ThemedText } from "./themed-text";
import { ThemedButton } from "./themed-button";
import { Chantier, User } from "@/class/class";
import { Dimensions } from "react-native";
import Animated, {
  Layout,
  LinearTransition,
  Easing,
  runOnJS,
} from "react-native-reanimated";
import { useChantier } from "@/app/Context";
import { getChantiers } from "@/class/class";

const screenHeight = Dimensions.get("window").height;

/*

<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
  <SelectChantier ></SelectChantier>
</ThemedView>

*/

export default function SelectChantier() {
  const { chantier, setChantier } = useChantier();
  const [search, setSearch] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [chantiers, setChantiers] = useState<Chantier[]>([]);

  const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
  const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
  const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
  const AnimatedThemedTextInput =
    Animated.createAnimatedComponent(ThemedTextInput);

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

  useEffect(() => {
    async function loadChantiers() {
      const list = await getChantiers();
      setChantiers(list);
    }

    loadChantiers();
  }, []);

  function selectChantier(chantier: Chantier): void {
    setChantier(chantier);
    setIsOpen(false);
  }

  const renderChantier = (chantier: Chantier, index: number) => {
    return (
      <ScrollView>
        {chantiers
          .filter((c) => c.adresse.toLowerCase().includes(search.toLowerCase()))
          .map((chantier, index) => (
            <Pressable key={index} onPress={() => selectChantier(chantier)}>
              <ThemedView lvl={4} style={styles.chantier}>
                <ThemedText>Adresse: {chantier.adresse}</ThemedText>
                <ThemedText>
                  Chef de chantier: {chantier.chef.last_name}{" "}
                  {chantier.chef.name}
                </ThemedText>
                <ThemedText>
                  Date de début: {chantier.dateDep.toLocaleDateString()}
                </ThemedText>
                <ThemedText>État: {chantier.etat}</ThemedText>
              </ThemedView>
            </Pressable>
          ))}
      </ScrollView>
    );
  };

  return (
    <Animated.View
      layout={LinearTransition.duration(200)}
      style={isOpen ? styles.windowOpean : styles.windowClose}
    >
      <AnimatedThemedView
        layout={LinearTransition.duration(200)}
        lvl={2}
        shadow={true}
        style={styles.window}
      >
        <ThemedButton
          style={isOpen ? styles.buttonOpen : styles.buttonClose}
          lvl={isOpen ? 1 : 1}
          onPress={() => onPressOpen()}
        >
          <ThemedText style={styles.buttonText}>
            {isOpen ? "Close" : "Open"}
          </ThemedText>
        </ThemedButton>
        {isOpen && (
          <View style={styles.menu}>
            <ThemedTextInput
              lvl={1}
              border={4}
              style={styles.input}
              placeholder="Rechercher un chantier"
              value={search}
              onChangeText={setSearch}
            />
            <ThemedView lvl={2} style={styles.list}>
              <ScrollView contentContainerStyle={styles.chantiersList}>
                {chantiers.map((chantier, index) =>
                  renderChantier(chantier, index)
                )}
              </ScrollView>
            </ThemedView>
          </View>
        )}
      </AnimatedThemedView>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  windowClose: {
    //backgroundColor: '#00FFFF',
    //borderRadius:10,
    padding: 10,
    width: "50%",
    height: 60,
    overflow: "hidden",
  },
  windowOpean: {
    //backgroundColor: '#00FFFF',
    //borderRadius:10,
    width: "100%",
    height: screenHeight / 2,
    padding: 10,
  },
  window: {
    borderRadius: 15,
    height: "100%",
    //backgroundColor: '#00FF00',
    overflow: "hidden",
  },
  menu: {
    padding: 5,
    flex: 1,
    minHeight: 0,
    //backgroundColor:'#FF00FF',
  },
  list: {
    flex: 1,
    overflow: "hidden",
    borderRadius: 10,
  },
  chantiersList: {
    //padding:5,
    //backgroundColor:'0000FF',
    //flexDirection: 'row',
    //alignItems: 'center',
    gap: 8,
  },
  chantier: {
    padding: 5,
    //marginTop:5,
    //margin:5,
    borderRadius: 10,
    //borderWidth: 1,
  },
  input: {
    width: "100%",
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
    marginBottom: 10,
  },
  buttonClose: {
    width: "100%",
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height: 40,
  },
  buttonOpen: {
    width: "50%",
    margin: 5,
    borderRadius: 10,
    padding: 10,
    height: 40,
  },
  buttonText: {
    textAlign: "center",
  },
});