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'
          : props.isPassword
          ? 'Password text entry box'
          : undefined
      }
      accessibilityHint={
        props.isUsername
          ? 'Enter your tagg username here'
          : props.isPassword
          ? 'Enter your tagg password here'
          : undefined
      }
      style={styles.credentials}
      placeholder={
        props.isUsername
          ? 'Username'
          : props.isPassword
          ? 'Password'
          : undefined
      }
      placeholderTextColor="#FFFFFF"
      autoCompleteType={
        props.isUsername ? 'username' : props.isPassword ? 'password' : 'off'
      }
      textContentType={
        props.isUsername ? 'username' : props.isPassword ? 'password' : 'none'
      }
      returnKeyType={
        props.isUsername ? 'next' : props.isPassword ? 'go' : 'default'
      }
      keyboardType={
        props.isUsername
          ? 'ascii-capable'
          : props.isPassword
          ? 'default'
          : undefined
      }
      onChangeText={(input) => props.onChangeText(input)}
      defaultValue={props.type}
      onSubmitEditing={props.onSubmitEditing}
      blurOnSubmit={
        props.isUsername ? false : props.isPassword ? undefined : undefined
      }
      //   ref={props.isUsername ? undefined : useRef()}
      secureTextEntry={
        props.isUsername ? false : props.isPassword ? true : false
      }
      //   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,
  isPassword: PropTypes.bool,
  onChangeText: PropTypes.func.isRequired,
  onSubmitEditing: PropTypes.func,
  //   ref: PropTypes.any,
  focusPasswordInput: PropTypes.bool,
};

export default LoginInput;