import React, { Component } from "react";
import PropTypes from "prop-types";
import { EfeFormGroup } from "./Form";
import EfeFormControl from "./FormControl";

export interface TextInputProps {
  classes?: string;
  label?: string;
  id: string;
  placeholder?: string;
  smallMessage?: string;
  type?: string;
}

class EfeTextInput extends Component<TextInputProps, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { string }   classes          - Optional. String value added to the classes.
   *   @prop { string }   label            - Optional. Label of the text input.
   *   @prop { string }   id               - Required. Id of the text input component.
   *   @prop { string }   placeholder      - Optional. Placeholder of the text input component.
   *   @prop { string }   smallMessage     - Optional. Small text of the input.
   *   @prop { string }   type             - Optional. Type of the input.
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    classes: PropTypes.string,
    label: PropTypes.string,
    id: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    smallMessage: PropTypes.string,
    type: PropTypes.string
  };

  /* Life Cycle Functions
   * ------------------------------------------------ */
  render() {
    const { classes, label, id, placeholder, type, smallMessage } = this.props;
    return (
      <EfeFormGroup>
        {label && <label htmlFor={id}>{label}</label>}
        <EfeFormControl
          classes={classes}
          id={id}
          placeholder={placeholder || ""}
          type={type || ""}
        />
        {smallMessage && (
          <small id={id} className="form-text text-muted">
            {smallMessage}
          </small>
        )}
      </EfeFormGroup>
    );
  }

  /* Component Functions
   * ------------------------------------------------ */

  _getClasses = () => {
    const { classes } = this.props;
    let className = `form-control ${classes || ""}`;

    return className;
  };
}

export default EfeTextInput;
