import { useChantier } from '@/app/ContextChantier';
import { Chantier, exempleChantier } from '@/class/class';
import { 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[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
    
    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);
  }

  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: chantier.urlImg }} style={styles.image} />
            
          </View>
          <View>
            <ThemedText>Adresse: {chantier.adresse}</ThemedText>
            <ThemedText>Chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
            <ThemedText >Date de début: {chantier.dateDep}</ThemedText>
            <ThemedText>Etat: {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" : "Chantiers"}</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',
  }
});