import { useState } from 'react';
import { Button, GestureResponderEvent, ScrollView, StyleSheet, View } from 'react-native';
import { ThemedTextInput } from './themed-textinpute';
import { ThemedView } from "./themed-view";

export default function SelectChantier() {

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

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


    const renderChantier = ()  => {
      return(
      <ThemedView lvl={0} style={styles.chantier}>
      </ThemedView>
      );
    };

    return (
        <ThemedView lvl={2} style={styles.selectZone}>
          {!isOpen && (
             <Button onPress={onPressOpen} title={"Open"}/>
          )}
           {isOpen && (
            <ScrollView>
               <Button onPress={onPressOpen} title={"Close"}/>
                <View style={styles.searchZone}>
                    <ThemedView lvl={0} style={styles.searchMenu}>
                        <ThemedTextInput placeholderTextColor="#808080"
                            placeholder='Rechercher un chantier'
                            value={search}
                            onChangeText={setSearch}
                        />
                    </ThemedView>
                </View>
                
                <View>

                </View>
            </ScrollView>
           )}
        </ThemedView>

    );
}

const styles = StyleSheet.create({
    selectZone:{
    position: 'absolute',
    width: "100%",
    margin: 0,
    borderRadius: 5,
    zIndex: 9999,
    elevation: 9999,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  searchMenu:{
    color:'#FFAAAA',
    borderRadius: 5,
    width: "100%",
    margin: 0,

    
  },
    searchZone:{
    width: "100%",
    padding:20,
    marginTop:50,
    alignItems: 'center',
  },
  chantier:{
  }
});