import { useChantier } from '@/app/ContextChantier';
import { useState } from 'react';
import { Dimensions, LayoutAnimation, Pressable, 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;



export default function SetStatus() {

    const { chantier, setChantier} = useChantier();
    const [currentSatus, setCurrentSearch] = useState("En cours");
    const [isOpen,setIsOpen] = useState(false);

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

    const choices = ["En cours","Interrompu","Terminé","Non réalisé"]

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

    function selectSatus(status: string): void {
        setCurrentSearch(status);
        setIsOpen(false);
    }



    const choice = (status:string, index: number)  => {
      return(
      <Pressable key={index} onPress={() => selectSatus(status)}>
        <View style={styles.satus}>
            <ThemedText style={styles.centeredText}>{status}</ThemedText>
        </View >
      </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={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
            <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
          </ThemedButton>
          {isOpen &&
            <View style={styles.menu}>
                <View style={styles.list}>
                        
                    {choices.map((str, index) => (
                            str!==currentSatus && choice(str, index)
                    ))}
                </View>
            </View>
          }
        </AnimatedThemedView>
      </Animated.View>
    )
    
}

const styles = StyleSheet.create({

  windowClose:{
    //backgroundColor: '#00FFFF',
    //borderRadius:10,
    padding: 10,
    width:"50%",
    //height:60,
    overflow: 'hidden',    
  },
  windowOpean:{
    width:"50%",
    padding: 10,
  },
  window:{
    borderRadius:15,
    //backgroundColor: '#00FF00',
    overflow: 'hidden',
  },
  menu:{
    padding:0,
    flex: 1, 
    //backgroundColor:'#FF00FF',
  },
  list:{
    flex: 1,
    overflow: 'hidden',
    borderRadius:10,

  },
  satus:{
    padding:10,
    flexDirection: 'row',
  },
  button:{
    width:'100%',
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height:40,
  },
  centeredText:{
    textAlign: 'center',
  }
});