import React from 'react';
import {TextInput, StyleSheet} from 'react-native';
import * as Animatable from 'react-native-animatable';

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
        }
        autoCapitalize="none"
        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.attempt_submit && !props.isValid && (
        <Animatable.Text
          animation="shake"
          duration={500}
          style={styles.invalidCredentials}>
          {props.validationWarning}
        </Animatable.Text>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  credentials: {
    top: 175,
    width: 248,
    height: 40,
    fontSize: 20,
    color: '#FFFFFF',
    borderColor: '#FFFDFD',
    borderWidth: 2,
    borderRadius: 20,
    paddingLeft: 13,
    marginVertical: 15,
  },
  invalidCredentials: {
    top: 165,
    color: '#F4DDFF',
    paddingHorizontal: 30,
    textAlign: 'center',
  },
});

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

export default LoginInput;