import React, { Component, FunctionComponent } from "react";
import PropTypes from "prop-types";
import { inputGroupSize } from "../../constants/variables";

interface InputGroupProps {
  classes?: string;
  size?: string;
}

interface InputGroupTextProps {
  id?: string;
}

class EfeInputGroup extends Component<InputGroupProps> {
  /* Props
   * ------------------------------------------------
   *   @prop { string }   classes          - Optional. String value added to the classes.
   *   @prop { string }   size             - Optional. Size of the input group.
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    classes: PropTypes.string,
    size: PropTypes.string
  };
  render() {
    const { children } = this.props;
    return <div className={this._getClasses()}>{children}</div>;
  }

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

  _getClasses = () => {
    const { classes, size } = this.props;
    let className = `input-group mb-3 ${classes || ""}`;

    if (inputGroupSize.includes(size || "")) {
      className += ` input-group-${size}`;
    }

    return className;
  };
}

//Sub Components

export const EfeInputGroupPrepend: FunctionComponent<any> = props => {
  return <div className="input-group-prepend">{props.children}</div>;
};

export const EfeInputGroupAppend: FunctionComponent<any> = props => {
  return <div className="input-group-append">{props.children}</div>;
};

export const EfeInputGroupCustomFile: FunctionComponent<any> = props => {
  return <div className="custom-file">{props.children}</div>;
};

export const EfeInputGroupText: FunctionComponent<InputGroupTextProps> = props => {
  /* Props
   * ------------------------------------------------
   *   @prop { string }   id   - Required. Id of the text input component.
   */

  return (
    <label className="input-group-text" htmlFor={props.id}>
      {props.children}
    </label>
  );
};

EfeInputGroupText.propTypes = {
  id: PropTypes.string
};

export default EfeInputGroup;
