import * as React from 'react';
import { Sizes, Colors, Variants } from '../../styles';
import { StyledInputContainer, StyledTextInput, StyledLabel, StyledInputError } from './styled-text-input';

interface Props {
    label?: React.ReactNode;
    name: string;
    color: Colors;
    size: Sizes;
    variant: Variants;
    value?: string | number;
    onChange: (e: { target: { value: string} }) => void;
    type: 'text' | 'number' | 'password' | 'date';
    error?: string;
    placeholder?: string;
    onKeyPress?: any;
    style?: React.CSSProperties;
    onSelect?: any;
    fullWidth?: boolean;
    ref?: any;
    readOnly?: boolean;
}

const TextInput = (props: Props) => (
    <StyledInputContainer
        onKeyPress={props.onKeyPress}
        style={props.style}
        fullWidth={props.fullWidth}
        ref={props.ref}
    >
        {props.label &&
            <StyledLabel
                htmlFor={props.name}
                error={props.error}
            >
                {props.label}
            </StyledLabel>
        }
        <StyledTextInput
            id={props.name}
            inputSize={props.size}
            name={props.name}
            type={props.type}
            value={props.value}
            error={props.error}
            color={props.color}
            variant={props.variant}
            onChange={props.onChange}
            onSelect={props.onSelect}
            placeholder={props.placeholder}
            readOnly={props.readOnly}
        />
        <StyledInputError>
            {props.error}
        </StyledInputError>
    </StyledInputContainer>
);

TextInput.defaultProps = {
    size: 'md',
    color: 'primary',
    variant: 'outlined',
    type: 'text',
    onChange: (e: any) => {},
};

export default TextInput;