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 } from 'react-native';
import { useChantier } from '../ContextChantier';
import { useRessources } from '../ContextRessource';
import { useUser } from '../ContextUser';
import { getRessources, getUsers, addChantier } from '@/services/ressourcesService';
import { Chantier, Ressources } 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 Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut

//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 [editMode,setEditMode] = useState(false);

  const [loading, setLoading] = useState(false);
  const [objet, setObjet] = useState('');
  const [date, setDate] = useState('');
  const [chefChantier, setChefChantier] = useState('');
  const [adresse, setAdresse] = useState('');
  const [duree, setDuree] = useState('');
  const [contact, setContact] = useState('');
  const [userSelect, setUserSelect] = useState<string[]>([]);
  const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);

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

  const renderInut = (name : string, preFill : string, value : string, setValue : ((text:string) => void)) => {
    return (
        <View style = {styles.inputLine}>
          <ThemedText style = {styles.inputName}>{name}:</ThemedText>
          <ThemedTextInput lvl = {1} style = {styles.input} placeholder={preFill} value = {value} onChangeText={setAdresse} />
        </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)}
            {renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)}
            {renderInut("Estimation de la durée (1/2 Journée)","14",duree,setDuree)}
            {renderInut("Adresse","1 Rue de la Coutellerie, Paris",adresse,setAdresse)}
            {renderInut("Contact client","07 01 02 03 04 05",contact,setContact)}
            {renderInut("Vehicule","TODO pas un input bien sûre",adresse,setAdresse)}
            {renderInut("Chef de chantier","TODO pas un input non plus",chefChantier,setChefChantier)}


            <ThemedButton
              lvl={1}
              shadow={true}
              style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
              onPress={() => handleAddChantier()}
              >
                <ThemedText>+</ThemedText>
            </ThemedButton>
          </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:60,
    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,
  },
  card: {
    flexDirection: "row",
    marginHorizontal: 20,
    marginBottom: 15,
    borderRadius: 10,
    padding: 10,
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 8,
    marginRight: 10,
  },
  info: {
    flex: 1,
    justifyContent: "center",
  },
  footer: {
    padding: 20,
  },
  empty: {
    textAlign: "center",
    marginTop: 30,
    color: "#888",
  },
  filterMenuOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 999,
  },
  filterMenu: {
    width: "80%",
    borderRadius: 12,
    padding: 20,
    backgroundColor: "#fff",
  },
  filterTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center",
  },
});