mmm-projet/components/selectChantier.tsx

import { useChantier } from "@/app/ContextChantier";
import { Chantier } from "@/class/class";
import { getChantiers } from "@/services/ressourcesService";
import { useEffect, useState } from "react";
import {
  Dimensions,
  Image,
  LayoutAnimation,
  Pressable,
  ScrollView,
  StyleSheet,
  View
} from "react-native";
import Animated, {
  LinearTransition
} from "react-native-reanimated";
import { ThemedButton } from "./themed-button";
import { ThemedText } from "./themed-text";
import { ThemedTextInput } from "./themed-textinput";
import { ThemedView } from "./themed-view";

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 (
        <Pressable key={index} onPress={() => selectChantier(chantier)}>
          <ThemedView lvl={4} style={styles.chantier}>
            <View>
              <Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
            </View>
            <View>
            <ThemedText>Adresse: {chantier.adresse}</ThemedText>
            <ThemedText>Chef de chantier: {chantier.chef.last_name}{" "}{chantier.chef.name}</ThemedText>
            <ThemedText>État: {chantier.etat}</ThemedText>
            </View>
          </ThemedView>
        </Pressable>
    );
  };

  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 ? "Fermer" : "Chantier"}
          </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,
    flexDirection: 'row',
    height: 100,
  },
  image:{
    margin:0,
    width: 60,
    height: 90,
    borderRadius: 5,
    marginRight: 10,
  },
  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",
  },
});