import * as React from 'react';
import * as classNames from 'classnames';
import {PureComponent} from 'react';
import {FormGroup, FormFeedback, FormText, Label} from './../../../../components';
import {InputTextProps} from './InputText';
import {Input} from './Input';

export interface Props extends InputTextProps {}

export class VerticalFormFieldInput extends PureComponent<Props, {}> {
  render() {
    const {
      className,
      helpText,
      id,
      label,
      name,
      success,
      successMessage,
      value,
      ...otherProps} = this.props;

    const labelId = `label-for-${name}`;

    return (
      <FormGroup
        aria-labelledby={labelId}
        aria-describedby={name}
      >
        <Label className="form-control-label" id={labelId} for={name}>
          {label}
        </Label>

        <Input
          name={name}
          id={name}
          value={value}
          {...otherProps as any}
        />

        {success && (
          <FormFeedback>{successMessage}</FormFeedback>
        )}

        {!!helpText && (
          <FormText tag="span" color="muted">{helpText}</FormText>
        )}
      </FormGroup>
    );
  }
}