import { useState } from 'react';
import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } 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, Chef, exempleChantier } from '@/class/class';
import {BlurView} from 'expo-blur';
import { Dimensions } from "react-native";

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

export default function SelectChantier() {

    const [search, setSearch] = useState('');
    const [isOpen,setIsOpen] = useState(false);
    const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
    

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


    const renderChantier = (chantier:Chantier, index: number)  => {
      return(
      <ThemedView key={index} lvl={3} style={styles.chantier}>
        <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>
      </ThemedView>
      );
    };

    if(!isOpen){
    return (
        <View style={styles.closedSelectZone}>
          <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
            <ThemedText style={styles.buttonText}>Open</ThemedText>
          </ThemedButton>
        </View>
    )
    }
    else{
      return(
        <View style={styles.openedSelectZone}>
          <BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
            <ThemedView lvl={0} opacity="40">
              
                <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
                  <ThemedText style={styles.buttonText}>Close</ThemedText>
                </ThemedButton>

                <View style={styles.searchZone}>
                  <ThemedTextInput
                    lvl={1}
                    border={4}
                    style={styles.input}
                    placeholder='Rechercher un chantier'
                    value={search}
                    onChangeText={setSearch}
                  />
                </View>
                
                
                  <ScrollView>
                    {chantiers.map((chantier, index) => (
                      renderChantier(chantier, index)
                      ))
                    }
                  </ScrollView>
                  

            </ThemedView>
            
        </BlurView>
      </View>


      )
    };
}

const styles = StyleSheet.create({
  openedSelectZone:{
    position: 'absolute',
    width: "100%",
    borderRadius: 10,
    zIndex: 9999,
    elevation: 9999,
    overflow: "hidden",
    paddingTop:25,
    height: screenHeight/2,
  },
  blur:{
    /*flex: 1,*/
    /*backgroundColor: "rgba(255,255,255,0.0001)",*/
  },
  closedSelectZone:{
    position: 'absolute',
    width: "50%",
    borderRadius: 10,
    zIndex: 9999,
    elevation: 9999,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  searchMenu:{
    color:'#FFAAAA',
    borderRadius: 5,
    width: "100%",
    margin: 0,

    
  },
    searchZone:{
    width: "100%",
    padding:10,
    marginTop:10,
    alignItems: 'center',
  },
  chantier:{
    padding:10,
    margin:10,
    borderRadius:10,
    //borderWidth: 1,
  },
  input: {
    width: '100%',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
  },
  button:{
    width:'100%',
    margin: 5,
    borderRadius: 10,
    padding: 10,
  },
  buttonOpen:{
    width:'50%',
    margin: 5,
    borderRadius: 10,
    padding: 10,
  },
  buttonText:{
    textAlign: 'center',
  }
});