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 { ThemedView } from "./themed-view";

const screenHeight = Dimensions.get("window").height;
const { width, height } = Dimensions.get("window");


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 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={styles.windowBox}>
          <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({

  windowBox:{
    zIndex: 2,
    //backgroundColor: '#00FFFF40',
    width:"30%",
    padding: 10,
    paddingLeft: 0,
    overflow: 'hidden',
  },
  window:{
    borderRadius:15,
    //backgroundColor: '#00FF00',
    overflow: 'hidden',
  },
  menu:{
    padding:0,
    flex: 1, 
    //backgroundColor:'#FF00FF',
  },
  list:{
    flex: 1,
    overflow: 'hidden',
    borderRadius:10,

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