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

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

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={{height: 40}}
        value={username}
      />
      <TextInput
        enablesReturnKeyAutomatically
        onChangeText={(text) => _updateState('password', text)}
        placeholder="password"
        secureTextEntry
        style={{height: 40}}
        value={password}
      />
      <Button
        disabled={!enabled}
        onPress={_handleLoginSubmit}
        title="Login"
      />
    </View>
  );
}

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