import React from 'react';
import {Text, TextInput, StyleSheet} from 'react-native';

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
        }
        secureTextEntry={
          props.isUsername ? false : props.isPassword ? true : false
        }
        ref={props.input_ref}
      />
      {!props.isValid && (
        <Text style={styles.invalidCredentials}>{props.validationWarning}</Text>
      )}
    </>
  );
};

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,
  },
  invalidCredentials: {
    top: 180,
    color: '#F4DDFF',
  },
});

interface LoginInputProps {
  type: string;
  isUsername?: boolean;
  isPassword?: boolean;
  onChangeText: (input: string) => void;
  onSubmitEditing?: () => void;
  input_ref?: object;
  focusPasswordInput?: boolean;
  isValid?: boolean;
  validationWarning?: string;
}

export default LoginInput;