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

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, sendNewChantier } from '@/services/ressourcesService';
import { Chantier, Ressources, User, Reservation } 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 SelectRessource from '@/components/add/select/selectRessource';
import { db } from '@/firebase_config';
import { doc } from 'firebase/firestore';

import { useLocation } from '@/hooks/useLocation';

type RessourcesQte = [Ressources, number];

//Uniquement accessible par le RESPONSSABLE du chantier
//Pour créer ou modifier un chantier
export default function AddChantier() {
  const { chantier, setChantier } = useChantier();
  const { user, setUser } = useUser();
  const { ressources, setRessources } = useRessources();
  const { geocodeAddress} = useLocation();
  
  const [editMode,setEditMode] = useState(false);

  const [objet, setObjet] = useState('');
  const [date, setDate] = useState(new Date());
  const [morning, setMorning] = useState(true);
  const [chefChantier, setChefChantier] = useState<User>();
  const [adresse, setAdresse] = useState('');
  const [duree, setDuree] = useState('');
  const [contact, setContact] = useState('');
  const [machines, setMachines] = useState<RessourcesQte[]>();
  const [ouvriers, setOuviers] = useState<RessourcesQte[]>();
  const [outils, setOutils] = useState<RessourcesQte[]>();

  const [showDateSelect,setSowDateSelect] = useState(false);
  const [openConfirmation,setOpenConfirmation] = useState(false);

  const [userSelect, setUserSelect] = useState<string[]>([]);
  const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);

  async function handleAddChantier() {
    setOpenConfirmation(true);
  }


  const onSelectDate = (event: DateTimePickerEvent, selectedDate?: Date) => {
    setSowDateSelect(false);
    if (selectedDate) {
      setDate(selectedDate);
    }
  };
  async function onConfirm(): Promise<void> {
      if (!isValidChantier() || !chefChantier){
        alert("Choisir un chef de Chantier");
        return;
      }
        setOpenConfirmation(false);
        var latitude=0;
        var longitude=0;
        try { //verification de l'adresse
          const coords = await geocodeAddress(adresse);
          if (coords) {
            latitude=coords.latitude;
            longitude=coords.longitude;
          }
          else{
            console.error("Impossible de géocoder l'adresse");
            alert("Adresse introuvable. Veuillez vérifier l'adresse.");
          }
        } catch (error) {
          console.error("Erreur lors de la création du chantier:", error);
          alert("Erreur lors de la création du chantier");
        }



        var chantier: Chantier = {
          id:"0",
          name: objet,
          adresse: adresse,
          etat: 'En cours',
          contact: contact,
          chef: chefChantier,
          dateDep: date,
          tempsEst: Number(duree),
          anomalies: [],
          latitude: latitude,
          longitude: longitude,
          equipe: [],
          materiel: [],
          vehicules: []
        }

        if(machines){
          machines.forEach(item => {
            chantier.vehicules.push({
              id:"0",
              chantier: chantier,
              ressource: item[0],
              quantity: item[1],
            })
          });
        }
        if(ouvriers){
          ouvriers.forEach(item => {
            chantier.equipe.push({
              id:"0",
              chantier: chantier,
              ressource: item[0],
              quantity: item[1],
            })
          });
        }
        if(outils){
          outils.forEach(item => {
            chantier.materiel.push({
              id:"0",
              chantier: chantier,
              ressource: item[0],
              quantity: item[1],
            })
          });
        }

        sendNewChantier(chantier);

        


        /*try {
          const coords = await geocodeAddress(adresse);
    
        if (!coords) {
          console.error("Impossible de géocoder l'adresse");
          alert("Adresse introuvable. Veuillez vérifier l'adresse.");
          return;
        }
        const chantierDate = new Date(date);
        chantierDate.setHours(morning ? 0 : 12, 0, 0, 0);
        //CREATE NEW TYPE CHANTIER FOR FIRESTORE
        const chantierFirestore = {
          name: objet,
          adresse,
          etat: "En cours",
          contact,
          chef: doc(db, "user", chefChantier.id), 
          equipe: [],
          //materiel: materiels
          //  ? [doc(db, "ressources", String(materiels.id))]
          //  : [],
          vehicules: machines?.map(e =>
            doc(db, "ressources", String(e[0].id))
          ) || [],
          anomalies: [],
          dateDep: chantierDate,
          tempsEst: parseInt(duree) || 1,
          latitude: coords.latitude,
          longitude: coords.longitude,
        };
      const id = await addChantier(chantierFirestore as any);
      if (id) {
        //console.log("Chantier created with ID:", id);
        setChantier({ ...chantierFirestore,
          name: objet,
          id,
          chef: chefChantier,
          equipe: [],
          materiel: [],//materiels ? [materiels] : [],
          vehicules: [], //data.map(([ressource]) => ressource)|| []
        } as Chantier);
        setOpenConfirmation(false);
      }
    } catch (error) {
    console.error("Erreur lors de la création du chantier:", error);
    alert("Erreur lors de la création du chantier");
  }*/
}

  function onCancel(): void {
    setOpenConfirmation(false);
  }

  function isValidChantier(): boolean {
    return objet!=="" && duree!=='' && adresse!=='' && contact!=='' && chefChantier!==undefined; //TODO
  }

  const renderValidationScreen = () => {
    return(
      <Modal transparent={true} >
        <View style={styles.overlay}>
          <ThemedView style={styles.overlayView}>
            <ThemedText style={{fontSize: 25}}>Créer le nouveau chantier suivant ? :</ThemedText>
            <ThemedView lvl={2} style={styles.summaryNewChantier}>
              <ThemedText style={{fontSize: 20}}>Objet: {objet===''?"NONE":objet}</ThemedText>
              <ThemedText style={{fontSize: 20}}>Date: {date.toLocaleDateString()} {morning ? "matin" : "après-midi"}</ThemedText>
              <ThemedText style={{fontSize: 20}}>Durée: {duree===''?"0":duree} demi-journées</ThemedText>
              <ThemedText style={{fontSize: 20}}>Adresse: {adresse===''?"NONE":adresse}</ThemedText>
              <ThemedText style={{fontSize: 20}}>Contact client: {contact===''?"NONE":contact}</ThemedText>
              <ThemedText style={{fontSize: 20}}>Chef de chantier: {chefChantier===undefined?"NONE":chefChantier.name}</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 renderInputDate = (name : string) => {
    return (
        <View style = {styles.inputLine}>
          <ThemedText style = {styles.inputName}>{name}:</ThemedText>
          <View style={{flexDirection: 'row', gap: "4%",}}>
            <ThemedView style = {[styles.input,{width:"48%"}]}>
              <ThemedButton>
                <ThemedText  onPress={() => setSowDateSelect(true)} style = {{borderRadius:10}}>{date.toLocaleDateString()}</ThemedText>
              </ThemedButton>
            </ThemedView>
            <ThemedView style = {[styles.input,{width:"48%"}]}>
              <ThemedButton>
                <ThemedText  onPress={() => setMorning(!morning)} style = {{borderRadius:10}}>{morning ? "matin" : "après-midi"}</ThemedText>
              </ThemedButton>
            </ThemedView>
            {showDateSelect && (
            <DateTimePicker
              value={date}
              mode="date"      // "time" ou "datetime" selon les besoins
              display="default"
              onChange={onSelectDate}
            />
            )}
          </View>
        </View>
    );
  };

  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 un nouveau chantier"}
            </ThemedText>
            {renderInut("Objet","Renovation",objet,setObjet,false)}
            {//renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)
            }
            {renderInputDate("Date de départ")}
            {renderInut("Estimation de la durée (en demi-journées)","14",duree,setDuree,true)}
            {renderInut("Adresse","1 Rue de la Coutellerie, Paris",adresse,setAdresse,false)}
            {renderInut("Contact client","07 01 02 03 04 05",contact,setContact,true)}
            <View style = {styles.inputLine}>
              <ThemedText style = {styles.inputName}>Chef de chantier:</ThemedText>
              <SelectChafChantier style = {styles.input} sendChefChantier={setChefChantier}/>
            </View>
            <View style = {styles.inputLine}>
              <ThemedText style = {styles.inputName}>Vehicules et machines:</ThemedText>
              <SelectRessource style={styles.input} sendRessources={setMachines} ressourceType="Machine"/>
            </View>
            <View style = {styles.inputLine}>
              <ThemedText style = {styles.inputName}>Ouvriers:</ThemedText>
              <SelectRessource style={styles.input} sendRessources={setOuviers} ressourceType="Ouvrier"/>
            </View>
            <View style = {styles.inputLine}>
              <ThemedText style = {styles.inputName}>Outils:</ThemedText>
              <SelectRessource style={styles.input} sendRessources={setOutils} ressourceType="Outil"/>
            </View>


            <ThemedButton
              lvl={1}
              shadow={true}
              style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
              onPress={() => handleAddChantier()}
              >
                <ThemedText>Valider</ThemedText>
            </ThemedButton>

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

const styles = StyleSheet.create({
  back:{
    height:"100%",
    width:"100%",
  },
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
},
  header: {
    marginTop:80,
    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,
  }
});