import * as React from 'react';
import * as classNames from 'classnames';
import {HTMLProps, PureComponent, SFC} from 'react';
import {VerticalFormFieldInput} from './VerticalFormFieldInput';
import {HorizontalFormFieldInput} from './HorizontalFormFieldInput';
import {commonDefaultProps, CommonFieldProps} from './../utils';

export interface ChangeProps extends CommonFieldProps<HTMLInputElement> {
  onChange?: any;
}

export interface InputTextProps extends ChangeProps {
  success?: boolean;
  successMessage?: string;
  valueIsArray?: boolean;
  onChange?: (value: string | string[]) => void;
}

export interface Props extends InputTextProps {
  vertical?: boolean;
}

export const InputText: SFC<Props> = (props) => {
  const {vertical, ...otherProps} = props;
  return renderFormFieldInput(props);
};

InputText.displayName = 'FormField.InputText';

InputText.defaultProps = Object.assign({}, commonDefaultProps, {
  success: false,
  successMessage: '',
  type: 'text',
  valueIsArray: false,
  vertical: false,
  onChange: () => { return; },
} as Partial<Props>);

const renderFormFieldInput = (props: Props) => {
  const {vertical, ...otherProps} = props;

  if (vertical) {
    return <VerticalFormFieldInput {...otherProps as any} />;
  } else {
    return <HorizontalFormFieldInput {...otherProps as any} />;
  }
};