import { useState } from "react";
import { TextInput, View, Text, Button, StyleSheet, Dimensions, ScrollView, TouchableOpacity } from "react-native";
import { baseIPAddress } from "../../../constants/server";
import { window } from "../../../constants/Layout";
import { SelectInput } from "../../components/form/select";

export default function NewPlace() {
    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("");

    function createPlace() {
        if (!address || !city || !name || !prix || !type)
        {
            //Render error
            return
        }

        console.log("Attente de la request")
    }

    
    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
        }
    })

    const cityList = ["Compiègne", "Margny", "Venette", "Autre"]
    const typeList = ["Maison", "Appartement", "Studio", "Autre"]
    const isMainCity = () => {
        let is = false
        cityList.forEach(element => {
            if(city == element && city != cityList[cityList.length - 1]) is = true
        });

        return is
    }
    const isMainType = () => {
        let is = false
        typeList.forEach(element => {
            if(type == element && type != typeList[typeList.length - 1]) is = true
        });

        return is
    }
    
    return (
        <View style={{marginTop:20, backgroundColor:"white", height:"100%"}} >
            <ScrollView style={{marginLeft:20, marginBottom: 20}}>
                <Text style={style.titles}>Adresse</Text>
                <TextInput style={style.input} onChangeText={setaddress} value={address} placeholder="Adresse"/>
                <TextInput style={style.input} onChangeText={setcomp} value={comp} placeholder="Complément"/>
                <SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} onChangeText={setcity} value={city} list={cityList}/>
                {isMainCity() ? null : <TextInput style={style.input} onChangeText={setcity} value={city}/>}
                <Text style={style.titles}>Nom</Text>
                <TextInput style={style.input} onChangeText={setname} value={name} placeholder="Nom"/>
                <Text style={style.titles}>Places restantes</Text>
                <TextInput style={style.input} onChangeText={setplacesRestantes} value={placesRestantes} placeholder="Places restantes"/>
                <Text style={style.titles}>Prix</Text>
                <TextInput style={style.input} onChangeText={setprix} value={prix} placeholder="Prix"/>
                <Text style={style.titles}>Type de logement</Text>
                <SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} onChangeText={settype} value={type} list={typeList}/>
                {isMainType() ? null : <TextInput style={{...style.input, marginBottom:25}} onChangeText={settype} value={type}/>}
                <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>
            </ScrollView>
        </View>
    )
}