import React, { StatelessComponent } from 'react';
import * as Styles from './text-input.styles';
import { TextInputProps } from './text-input.types';

const TextInput: StatelessComponent<TextInputProps> = (props): JSX.Element => (
  <Styles.InputElement
    name={props.data.id}
    className={props.className}
    placeholder={`${props.data.label}${props.data.required ? ' *' : ''}`}
    autoComplete={!props.autoComplete ? 'off' : 'on'}
    value={props.value}
    type={props.data.config && (props.data.config.inputType || 'text')}
    error={props.error}
    onChange={(e: React.FormEvent<HTMLInputElement>): any => props.onChange(e.currentTarget.value, props.data.id)}
    required={props.data.required}
  />
);

TextInput.defaultProps = {
  autoComplete: true
};

export default TextInput;