import React, { InputHTMLAttributes } from 'react';
import cx from 'classnames';

interface Props extends InputHTMLAttributes<HTMLInputElement> {
  id: string;
  className?: string;
  inputSize?: string;
  valid?: boolean;
  invalid?: boolean;
  enhanceNativeSupport?: boolean;
}

export function TextInput({
  id,
  className = '',
  valid,
  invalid,
  enhanceNativeSupport,
  inputSize,
  ...rest
}: Props) {
  const classNames = cx(`text-input text-input-${inputSize}`, className, {
    'text-input-native': enhanceNativeSupport,
    'text-input-valid': valid,
    'text-input-invalid': invalid,
  });

  return <input id={id} className={classNames} {...rest} />;
}

const sizes = {
  md: 'md',
  sm: 'sm',
};

TextInput.sizes = sizes;

TextInput.defaultProps = {
  inputSize: sizes.md,
  valid: false,
  invalid: false,
  enhanceNativeSupport: false,
  className: '',
};
