import React, { useState } from 'react';
import { View, TouchableOpacity, Text, Alert, ScrollView, TextInput } from 'react-native';
import { SafeAreaView, Button } from '../../components';
import * as Labels from '../../utils/Labels';
import styles from './LoginScreen.styles';

const LoginScreen = ({ navigation }) => {
    console.log(navigation);
    const [ loading, setLoading ] = useState(false);
    const [ email, setEmail ] = useState('');
    const [ password, setPassword ] = useState('');


    /**
   * It's function to go to Register screen
   */
    const onRegisterPressed = () => {
        navigation.replace('Register');
    };

    /**
   * It's function to go to Remind screen
   */
    const onRemindPressed = () => {
        navigation.navigate('Remind');
    };

    /**
   * It's function to call userLogin function
   */
    const onLoginPressed = () => {

    };

    /**
   * It's function to call facebookLogin function
   */
    const onFacebookPressed = () => {

    };

    const alertErrorConnection = (id) => {
        Alert.alert('Problem', 'Wystąpił problem w połączeniu z serwerem', [
            {
                text: 'OK',
                onPress: () => {
                    setLoading(false);
                }
            }
        ]);
    };

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.title}>
                <Text style={styles.titleText}>{Labels.LOGIN_TEXT}</Text>
            </View>
            <View style={styles.form}>
                <TextInput
                    style={styles.loginInput}
                    value={email}
                    onChangeText={(text) => setEmail(text)}
                    placeholder={Labels.EMAIL_PLACEHOLDER}
                    placeholderTextColor="#000"
                    keyboardType="email-address"
                />
                <TextInput
                    style={styles.loginInput}
                    value={password}
                    onChangeText={(text) => setPassword(text)}
                    placeholder={Labels.PASSWORD_PLACEHOLDER}
                    placeholderTextColor="#000"
                    secureTextEntry
                />
            </View>
            <View>
                <Button btnStyle={styles.loginButton} textStyle={styles.loginButtonText} text={Labels.LOGIN_BUTTON_TEXT} onPress={() => navigation.navigate('ProfileSelect')} />
                <Button btnStyle={styles.remindButton} textStyle={styles.remindButtonText} text={Labels.REMIND_BUTTON_TEXT} onPress={onRemindPressed} />
                <Button btnStyle={styles.registerButton} textStyle={styles.registerButtonText} text={Labels.REGISTER_BUTTON_TEXT} onPress={onRegisterPressed} />
                <Button btnStyle={styles.facebookButton} textStyle={styles.facebookButtonText} text={Labels.FACEBOOK_BUTTON_TEXT} onPress={onFacebookPressed} />
            </View>
        </SafeAreaView>
    );
};

export default LoginScreen;