import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { Button, TextInput, View } from 'react-native';

import styles from './Login.styles.js';

export default function LocalLogin({ doLoginAction }) {
    const [enabled, setEnableSubmit] = useState(false);
    const [password, setPassword] = useState(null);
    const [username, setUsername] = useState(null);

    const _handleLoginSubmit = () => {
        doLoginAction(username, password);
    };

    const _updateState = (field, value) => {
        if (field === 'username') {
            setUsername(value);
        }

        if (field === 'password') {
            setPassword(value);
        }

        if (!!username && !!password) {
            setEnableSubmit(true);
        }
    };

    return (
        <View style={styles.loginWrap}>
            <TextInput
                keyboardType="email-address"
                onChangeText={(text) => _updateState('username', text)}
                placeholder="email"
                style={styles.textInput}
                value={username}
            />
            <TextInput
                enablesReturnKeyAutomatically
                onChangeText={(text) => _updateState('password', text)}
                placeholder="password"
                secureTextEntry
                style={styles.textInput}
                value={password}
            />
            <Button disabled={!enabled} onPress={_handleLoginSubmit} title="Login" />
        </View>
    );
}

LocalLogin.propTypes = {
    doLoginAction: PropTypes.func.isRequired,
};