import { useEffect, useMemo, useReducer, useState } from "react";
import { TextInput, View, Text, StyleSheet, Dimensions, ScrollView, TouchableOpacity, CheckBox, SectionList } from "react-native";
import { baseIPAddress, newPlacePath } from "../../../constants/server";
import { SelectInput } from "../../components/form/select";
import {Grid, TextField} from "@mui/material";

export default function NewPlace()
{
    const cityList = ["Compiègne", "Margny", "Venette"]
    const typeList = ["Maison", "Appartement", "Studio"]
    const equipmentList = ["wifi", "canap"]

    const [address, setaddress] = useState("");
    const [city, setcity] = useState("Compiègne");
    const [comp, setcomp] = useState("");
    const [name, setname] = useState("");
    const [placesRestantes, setplacesRestantes] = useState("");
    const [prix, setprix] = useState("");
    const [type, settype] = useState("");
    const [equip, updateEquip] = useReducer(reducingUpdate, equipmentList, reducingInit)

    const [isMainCity, setIsMainCity] = useState(true);
    const [isMainType, setIsMainType] = useState(true);

    const [customReload, setCustomReload] = useState(false)
    function Reload() { setCustomReload(!customReload) }
    const [placeAdded, setPlaceAdded] = useState(false)
    const [errorText, setErrorText] = useState("")

    function createPlace()
    {
        if (!address || !city || !name || !prix || !type)
        {
            //If a necessary var is undefined, render a user friendly error
            setErrorText("Veuillez bien remplir tous les champs obligatoires.")
            return
        }

        let place =
        {
            //Création de l'objet JSON à envoyer
			"address": [address, city].join(", "),
			"name": name,
			"place_restant": placesRestantes,
			"price": prix,
			"types": type,
            "equipment" : equip
        }

        fetch(baseIPAddress + newPlacePath, {
            //Appel du back
            method: "post",
            body: JSON.stringify(place)
        }).then(res => {
            //En cas de réussite de création
            setPlaceAdded(true)
        }).catch(err => {
            //En cas d'échec, render error
            setErrorText("Erreur serveur, veuillez bien remplir tous les champs")
        })


    }


    const style = StyleSheet.create({
        input: {
            borderBottomWidth: 1,
            fontSize: 15,
            borderBottomColor: "grey",
            width: Dimensions.get('window').width * (1/2)
        },
        titles: {
            fontSize: 30,
            fontWeight: "bold",
            marginTop: 25,
            marginBottom: 15
        },
        grid: {
          marginLeft: 20,
          alignItems: 'center',
          justifyContent: 'center',
          display: 'flex'
        }
    })

    return (
        <View style={{marginTop:20, backgroundColor:"white", height:"100%"}} >
            {errorText!=""? <Text>{errorText}</Text> : null}
            <ScrollView style={{marginLeft:20, marginBottom: 20}}>
                <Grid item style={{marginLeft:20}} container spacing={1}>
                  <Text style={style.titles}>Adresse</Text>
                </Grid>
                <Grid item style={{marginLeft:20}} container spacing={1}>
                  <TextField required id={address} placeholder="Adresse" onChangeText={setaddress}/>
                  <TextField style={{marginLeft:3}} onChangeText={setcomp} id={comp} placeholder="Complément"/>
                </Grid>
                <Grid item style={{marginLeft:20}}>
                  <SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} SetIsMain={setIsMainCity} useOther={true} onChangeText={setcity} value={city} list={cityList}/>
                  {isMainCity ? <TextField placeholder="Autre" onChangeText={setcity} id={city}/> : null}
                </Grid>
                <Grid item style={{marginLeft:20, marginTop: 10}}>
                  <Text style={style.titles}>Nom</Text>
                </Grid>
                <Grid item style={{marginLeft:20}}>
                  <TextField required onChangeText={setname} id={name} placeholder="Nom"/>
                </Grid>
                <Grid item style={{marginLeft:20, marginTop: 10}}>
                  <Text style={style.titles}>Places restantes</Text>
                </Grid>
                <Grid item style={{marginLeft:20}}>
                  <TextField required onChangeText={setplacesRestantes} id={placesRestantes} placeholder="Places restantes"/>
                </Grid>
                <Grid item style={{marginLeft:20, marginTop: 10}}>
                  <Text style={style.titles}>Prix</Text>
                </Grid>
                <Grid item style={{marginLeft:20}}>
                  <TextField required onChangeText={setprix} id={prix} placeholder="Prix"/>
                </Grid>
                <Grid item style={{marginLeft:20, marginTop: 10}}>
                  <Text style={style.titles}>Type de logement</Text>
                </Grid>
                <Grid item style={{marginLeft:20}}>
                  <SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} SetIsMain={setIsMainType} useOther={true} onChangeText={settype} value={type} list={typeList}/>
                  {isMainType ? <TextField style={{...style.input, marginBottom:25}} placeholder="Autre" onChangeText={settype} value={type}/> : null}
                </Grid>
                <Grid>
                  <TouchableOpacity style={{borderRadius:1, backgroundColor:"black", padding:10, width:180}} onPress={createPlace}>
                    <Text style={{fontSize:16, color:"white", fontWeight:"bold", textAlign:"center"}}>Ajouter le logement</Text>
                  </TouchableOpacity>
                </Grid>



                <View>
                    {equipmentList.map(item => {
                        return (
                            <View key={item} style={{flexDirection:"row"}}>
                                <CheckBox value={equip[item]} onValueChange={(val) => {updateEquip({"value": val, "item": item}); Reload()}} />
                                <Text>{item}</Text>
                            </View>
                        )
                    })}
                </View>
            </ScrollView>
        </View>
    )
}


/**
 * Reducing functions
 */
function reducingInit(equipmentList)
{
    let dic = {}
    equipmentList.forEach(element => {
        dic[element] = false
    })
    return dic
}

function reducingUpdate(state, action)
{
    state[action.item] = action.value
    return state
}