import React, {useEffect, useState} from 'react';
import {Image, Text, TextInput, TouchableOpacity, View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import SelectMultiple from 'react-native-select-multiple'
import {firebase} from '../../utils/firebase';
import {labels2Genre} from '../../utils';
import styles from './styles';
/**
* This is the React component which defines the UI for the User Registration screen in the app.
*
* @function RegistrationScreen
* @param {Object} props - This is a dictionary of component properties.
* @namespace
*/
export default function RegistrationScreen({navigation}) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [selectedBooks, setSelectedBooks] = useState([]);
/**
* This function triggers a navigation event to navigate to the Login screen.
*
* @function onFooterLinkPress
* @memberof RegistrationScreen
*/
const onFooterLinkPress = () => {
navigation.navigate('Login');
};
/**
* This function uses the data entered by the user to register a new user with Firebase
* and update our Firestore accordingly.
*
* @function onRegisterPress
* @memberof RegistrationScreen
*/
const onRegisterPress = () => {
if (password !== confirmPassword) {
alert("Passwords don't match.");
return;
}
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then((res) => {
const uid = res.user.uid;
const data = {
id: uid,
email,
name,
genres: selectedBooks.map(({label}) => labels2Genre[`${label}`]),
};
const usersRef = firebase.firestore().collection('users');
usersRef
.doc(uid)
.set(data)
.then(() => navigation.navigate('Home', {user: data}))
.catch((err) => alert(err));
})
.catch((err) => alert(err));
};
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{flex: 1, width: '100%'}}
keyboardShouldPersistTaps="always">
<Image
style={styles.logo}
source={require('../../../assets/icon.png')}
/>
<TextInput
style={styles.input}
placeholder="Full Name"
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setName(text)}
value={name}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholder="E-mail"
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder="Password"
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder="Confirm Password"
onChangeText={(text) => setConfirmPassword(text)}
value={confirmPassword}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<Text style={styles.text}>Tell Us What Kinds of Books you Like!</Text>
<SelectMultiple
style={styles.multiselect}
items={Object.keys(labels2Genre)}
selectedItems={selectedBooks}
onSelectionsChange={(books) => setSelectedBooks(books)}
/>
<TouchableOpacity
style={styles.button}
onPress={() => onRegisterPress()}>
<Text style={styles.buttonTitle}>Create account</Text>
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>
Already got an account?{' '}
<Text onPress={onFooterLinkPress} style={styles.footerLink}>
Log in
</Text>
</Text>
</View>
</KeyboardAwareScrollView>
</View>
);
}