import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';


import { ThemedView } from '@/components/theme/themed-view';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, Button, TextInput, Text, View, Modal } from 'react-native';
import { useChantier } from '@/app/ContextChantier';
import { useRessources } from '@/app/ContextRessource';
import { useUser } from '@/app/ContextUser';
import { getRessources, getUsers, addChantier } from '@/services/ressourcesService';
import { Chantier, Ressources, User } from '@/class/class';
import { ThemedText } from '@/components/theme/themed-text';
import { ThemedButton } from '@/components/theme/themed-button';
import { ThemedTextInput } from '@/components/theme/themed-textinput';
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';

import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
import SelectChafChantier from '@/components/add/select/selectChefChantier';
import SelectMachine from '@/components/selectMachine';


type Dictionary = {
  [key: string]: string;
};

const exempleNom: Dictionary = {
  'Outil': "Boîte à outils",
  'Machine': "Bulldozer",
  'Ouvrier': "Charpentier"
};

const exempleQte: Dictionary = {
  'Outil': "12",
  'Machine': "1",
  'Ouvrier': "12"
};

type Props = {
  ressourceType: 'Outil' | 'Machine' | 'Ouvrier';
};

export default function AddRessource({ressourceType, ...otherProps }: Props) {
  const { ressources, setRessources } = useRessources();
  
  const [editMode,setEditMode] = useState(false);

  const [loading, setLoading] = useState(false);
  const [nom, setNom] = useState('');
  const [quantite, setQuantite] = useState('');
  const [quantiteDisponible,setQuantiteDisponible] = useState('');  
  const [openConfirmation,setOpenConfirmation] = useState(false);

    async function handleAddRessource() {
    setLoading(true);
    setOpenConfirmation(true);
  }

        async function onConfirm(): Promise<void> {
        //TODO
        //await changeChantierStatus(chantier.id,tempStatus)
        //Il faut changer le UX 
        //setChantier({...chantier,etat: tempStatus})
        if(isValidRessource()){
          setOpenConfirmation(false);
        }
      }

      function onCancel(): void {
        setOpenConfirmation(false);
      }
  function isValidRessource():Boolean{
    return nom!= "" && quantite != "" && quantiteDisponible != "" 
  }

    const renderValidationScreen = () => {
      return(
        <Modal transparent={true} >
          <View style={styles.overlay}>
            <ThemedView style={styles.overlayView}>
              <ThemedText style={{fontSize: 25}}>Créer la nouvelle {ressourceType} suivante ? :</ThemedText>
              <ThemedView lvl={2} style={styles.summaryNewChantier}>
                <ThemedText style={{fontSize: 20}}>Nom: {nom===''?"NONE":nom}</ThemedText>
                <ThemedText style={{fontSize: 20}}>Quantité Total: {quantite===''?"0":quantite} </ThemedText>
              </ThemedView>
              <View style={styles.overlayView}>
                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onConfirm()}>
                  <ThemedText style={{fontSize: 25}}>Confirmer</ThemedText>
                </ThemedButton>
              </View>
              <View style={styles.overlayView}>
                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onCancel()}>
                  <ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
                </ThemedButton>
              </View>
            </ThemedView>
          </View>
        </Modal>
      )
}


  const renderInut = (name : string, preFill : string, value : string, setValue : ((text:string) => void),numeric:boolean) => {
    return (
        <View style = {styles.inputLine}>
          <ThemedText style = {styles.inputName}>{name}:</ThemedText>
          <ThemedTextInput lvl = {1} style = {styles.input} placeholder={preFill} value = {value} keyboardType={numeric ? "numeric" : "default"} onChangeText={setValue} />
        </View>
    );
  };

return (
    <ThemedView lvl={3} style={styles.back}>
      <View style={styles.container}>
        {editMode &&
        <View style={{width:"100%", position: 'absolute'}}>
          <SelectChantier></SelectChantier>
        </View>
        }
        <ScrollView>
          <View style = {styles.header}>
            
            <ThemedText style = {styles.text}>
              {editMode? "Edition d'un chantier"
              :"Ajouter une ressource " + ressourceType}
            </ThemedText>
            {renderInut("Nom",exempleNom[ressourceType],nom,setNom,false)}
            {renderInut("Quantité Total",exempleQte[ressourceType],quantite,setQuantite,true)}
            <ThemedButton
              lvl={1}
              shadow={true}
              style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
              onPress={() => handleAddRessource()}
              >
                <ThemedText>Valider</ThemedText>
            </ThemedButton>

            {openConfirmation && renderValidationScreen()}
          </View>
          
        </ScrollView>
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  back:{
    height:"100%",
    width:"100%",
  },
  container: {
    flex: 1,
  },
  header: {
    marginTop:30,
    alignItems: "center",
    paddingHorizontal: 20,
  },
  text: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 10,
  },
  inputBack: {
    width: "100%",
    borderRadius: 10,
    backgroundColor: "transparent",
  },
  inputLine:{
    width: "100%",
    //flexDirection: 'row',
    paddingVertical: 5,
    //alignItems: "center",
  },
  inputName: {
    fontSize: 16,
  },
  input: {
    width: "100%",
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
  },
  overlay:{
    backgroundColor:'#00000080',
    padding:"5%",
    paddingVertical:"20%",
    width:"100%",
    height:"100%",
  },
  overlayView:{
    borderRadius: 20,
    padding: 20,
    alignItems: "center",
    width: "100%",
    gap:5,
    //backgroundColor:'#ff0000',
  },
    buttonValid:{
    //borderWidth: 2,
    width:'100%',
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height:60,
    alignItems: "center",
    justifyContent: 'center',
  },
  summaryNewChantier:{
    width:'100%',
    borderRadius: 15,
    padding:10,
  }
});