import { ThemedButton } from "@/components/theme/themed-button";
import { ThemedText } from "@/components/theme/themed-text";
import { useState } from "react";
import { View,StyleSheet } from "react-native";
import AddChantier from "@/components/add/addChantier";
import AddRessource from "@/components/add/addRessource";
import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
import { ThemedView } from "@/components/theme/themed-view";

export default function AddScreen() {
    const [typeAdd, setTypeAdd] = useState('');


    return(
        <ThemedView lvl={3} style={styles.back}>
            <View style={styles.container}>
                {typeAdd===""? (
                    <View style={styles.selectTypeAdd} > 
                        <ThemedButton style={styles.button} onPress={() => setTypeAdd("Chantier")}>
                            <ThemedText>
                                Ajouter un chantier
                            </ThemedText>
                        </ThemedButton>
                        <ThemedButton style={styles.button}  onPress={() => setTypeAdd("Outil")}>
                            <ThemedText>
                                Ajouter un équipement
                            </ThemedText>
                        </ThemedButton>
                        <ThemedButton style={styles.button}  onPress={() => setTypeAdd("Machine")}>
                            <ThemedText>
                                Ajouter un vehicule ou machine
                            </ThemedText>
                        </ThemedButton>
                        <ThemedButton style={styles.button}  onPress={() => setTypeAdd("Ouvrier")}>
                            <ThemedText>
                                Ajouter un ouvrier
                            </ThemedText>
                        </ThemedButton>
                    </View>
                ):
                    <View>
                        <View style={styles.backButton}>
                            <ThemedButton style={styles.button} border={4} onPress={() => setTypeAdd("")}>
                                <ThemedText>
                                    Retour
                                </ThemedText>
                            </ThemedButton>
                        </View>
                        
                        {typeAdd==="Chantier"? (
                            <AddChantier/>
                        ):
                        (
                            <AddRessource ressourceType={typeAdd as 'Outil' | 'Machine' | 'Ouvrier'}/>
                        )}
                    </View>
                }

            </View>
        </ThemedView>
    )
}


const styles = StyleSheet.create({
  back:{
    height:"100%",
    width:"100%",
  },
  container: {
    flex: 1,
    //marginTop: Constants.statusBarHeight, //pour la barre menu du haut
  },
  button:{
    padding:10,
    borderRadius:10,
  },
  selectTypeAdd:{
    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
    gap:30,
    padding:20
  },
  backButton:{
    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
    position: 'absolute',
    padding: 20,
    zIndex: 100,
    //backgroundColor:"#FF0000",
  },
});