import React from 'react';
import {TextInput, StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

const LoginInput = (props: LoginInputProps) => {
  return (
    <TextInput
      accessibilityLabel={
        props.isUsername ? 'Username text entry box' : 'Password text entry box'
      }
      accessibilityHint={
        props.isUsername
          ? 'Enter your tagg username here'
          : 'Enter your tagg password here'
      }
      style={styles.credentials}
      placeholder={props.isUsername ? 'Username' : 'Password'}
      placeholderTextColor="#FFFFFF"
      autoCompleteType={props.isUsername ? 'username' : 'password'}
      textContentType={props.isUsername ? 'username' : 'password'}
      returnKeyType={props.isUsername ? 'next' : 'go'}
      keyboardType={props.isUsername ? 'ascii-capable' : 'default'}
      onChangeText={(input) => props.onChangeText(input)}
      defaultValue={props.type}
      onSubmitEditing={props.onSubmitEditing}
      blurOnSubmit={props.isUsername ? false : undefined}
      //   ref={props.isUsername ? undefined : useRef()}
      secureTextEntry={props.isUsername ? false : true}
      focus={props.isUsername ? undefined : props.focusPasswordInput}
    />
  );
};

const styles = StyleSheet.create({
  credentials: {
    top: 190,
    width: 248,
    height: 40,
    fontSize: 20,
    color: '#FFFFFF',
    borderColor: '#FFFDFD',
    borderWidth: 2,
    borderRadius: 20,
    paddingLeft: 13,
    marginVertical: 15,
  },
});

LoginInput.propTypes = {
  type: PropTypes.string.isRequired,
  isUsername: PropTypes.bool.isRequired,
  onChangeText: PropTypes.func.isRequired,
  onSubmitEditing: PropTypes.func,
  ref: PropTypes.any,
  focusPasswordInput: PropTypes.bool,
};

export default LoginInput;
