import React, { Component } from "react";
import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Text, View } from "react-native";
import firebase from "firebase";
import { Picker } from "@react-native-picker/picker";

import { styles } from "../config/styles";
import CustomButton from "../components/CustomButton";

export default class RegisterScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            email: '',
            password: '',
            interpreter: false,
        };
        this.onRegister = this.onRegister.bind(this)
    };

    onRegister() {
        const { username, email, password, interpreter } = this.state;
        firebase.auth().createUserWithEmailAndPassword(email, password)
            .then((result) => {
                firebase.firestore().collection("Users")
                    .doc(firebase.auth().currentUser.uid)
                    .set({
                        username,
                        email,
                        interpreter,
                    })
                console.log(result)
            })
            .catch((error) => {
                console.log(error)
            })
    }

    render() {
        return (
            <TouchableWithoutFeedback style={styles.regcontainer} onPress={Keyboard.dismiss} accessible={false}>
                <ImageBackground style={styles.regcontainer} source={require('../assets/yellow-white.jpg')}>
                    <TextInput style={styles.regtxtfield} placeholder="Userame" onChangeText={(username) => this.setState({ username })}/>
                    <TextInput style={styles.regtxtfield} placeholder="Email" onChangeText={(email) => this.setState({ email })}/>
                    <TextInput style={styles.regtxtfield} placeholder="Password" onChangeText={(password) => this.setState({ password })} secureTextEntry={ true }/>
                    <Text style={styles.qsttxt}>Are you an interpreter?</Text>
                    <Picker style={styles.picker} selectedValue={this.state.interpreter} onValueChange={(itemValue,itemIndex) => this.setState({interpreter: itemValue})}>
                        <Picker.Item label="Yes" value={true}/>
                        <Picker.Item label="No" value={false}/>
                    </Picker>
                    <CustomButton  marginTop={50} title="Register" onPress={() => this.onRegister()}/>
                </ImageBackground>
            </TouchableWithoutFeedback>
        );
    }
}