export default class Form extends Component<{}> {
    constructor(){
        super();
        this.state={
            username:'',
            password:''
        }
    }
    updateValue(text,field){
        if(field=='username'){
            this.setState({
                username:text,
            })
        }else if(field=='password'){
            this.setState({
                password:text,
            })
        }
    }
    _onLoginButton() {
        let collection = {}
        collection.username = this.state.username,
        collection.password = this.state.password
        console.warn(collection)


        var url = 'http://10.10.10.128:3000/api/auth/login';

        fetch(url, {
            method: 'POST',
            body: JSON.stringify(collection),
            headers:{
                'Content-Type': 'application/json'
            }
        }).then((response) => response.json())
        .then((responseJson) => {
            () =>navigate('FormHome')
        })
        .catch((error) => {
          console.error(error);
        });


    }

        //UI
        render(){
             //console.warn("navigate = " + until.inspect(this.props.navigation, false, null));
             const { navigate } = this.props.navigation;

            return(
            // <KeyboardAvoidingView  behavior="padding">
            <View style={styles.container}>
            <StatusBar
                    backgroundColor="#00c1c8"
                    barStyle="light-content"
                />
            <Logo/>
            <TextInput style={styles.inputBox}
                underlineColorAndroid='rgba(0,0,0,0)'
                placeholder="Email"
                placeholderTextColor = "#e1dddd"
                selectionColor="#fff"
                keyboardType="email-address"
                onSubmitEditing={()=> this.password.focus()}
                onChangeText= {(text)=>this.updateValue(text, 'username')}
            />

            <TextInput style={styles.inputBox}
                underlineColorAndroid='rgba(0,0,0,0)'
                placeholder="Password"
                secureTextEntry={true}
                placeholderTextColor = "#e1dddd"
                ref={(input) => this.password = input}
                onChangeText= {(text)=>this.updateValue(text, 'password')}

            />
            <TouchableOpacity
                onPress={()=>this._onLoginButton()}
                style={styles.button}>
                <Text style={styles.buttonText}>Login </Text>
            </TouchableOpacity>

            <Text style={styles.signupText}>OR</Text>
            <TouchableOpacity
                onPress={
                    () =>navigate('FormSignup')
                }>
                <Text style={styles.signupButton}> Signup</Text>
            </TouchableOpacity>
            </View>
            // </KeyboardAvoidingView>

            )

        }

}