import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { Text, View, TextInput, Button, StyleSheet } from 'react-native';
import API from './../API.js';


let LoginForm = ()=>{
  let [email, setEmail] = useState('');
  let [password, setPassword] = useState('');

  return (
    <View style={styles.mainView}>
      <Text>Log in</Text>
      <TextInput
        style={styles.input}
        onChangeText={text => setEmail(text)}
        defaultValue={email}
        placeholder=" email"
        autoCapitalize='none'
        autoComplete='email'
        autoCorrect={false}
      />
      <TextInput
        style={styles.input}
        onChangeText={text => setPassword(text)}
        defaultValue={password}
        placeholder=" password"
        textContentType="password"
        secureTextEntry={true}
        autoCapitalize='none'
        autoComplete='email'
        autoCorrect={false}
      />
      <Button
        onPress={async () => {
            let r = await API.logIn(email, password);
            console.log(r);
          }}
        title={"login"}
      />
    </View>
  );
}

export default LoginForm;

const styles = StyleSheet.create ({
  mainView:{
    flex: 1,
    flexDirection:'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 0, 255, 1.0)',
  },
  input: {
    height: 40,
    width: 300,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10
  },
});