import React, { Component } from "react";
import PropTypes from "prop-types";

export interface RadioButtonProps {
  classes?: string;
  checked?: boolean;
  disabled?: boolean;
  label?: string;
  id: string;
  inline?: boolean;
  name: string;
  value?: string;
}

class EfeRadioButton extends Component<RadioButtonProps, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { string }   classes          - Optional. String value added to the classes.
   *   @prop { boolean }  disabled         - Optional. Turns on the disable feature.
   *   @prop { string }   label            - Optional. Text of the radio button.
   *   @prop { string }   id               - Required. Id of the radio button component.
   *   @prop { string }   inline           - Optional.
   *   @prop { string }   name             - Optional. name of the radio button.
   *   @prop { string }   value            - Optional. Value of the radio button component.
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    classes: PropTypes.string,
    checked: PropTypes.bool,
    disabled: PropTypes.bool,
    label: PropTypes.string,
    id: PropTypes.string.isRequired,
    inline: PropTypes.bool,
    value: PropTypes.string
  };

  /* Life Cycle Functions
   * ------------------------------------------------ */
  render() {
    const { checked, label, id, name, value, disabled } = this.props;
    return (
      <div className={this._getClasses()}>
        <input
          className={"form-check-input"}
          type="radio"
          name={name}
          id={id}
          value={value}
          checked={checked}
          disabled={disabled}
        />
        <label className="form-check-label" htmlFor={id}>
          {label}
        </label>
      </div>
    );
  }

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

  _getClasses = () => {
    const { disabled, inline } = this.props;
    let className = `form-check ${disabled ? "disabled" : ""}`;

    if (inline) {
      className += ` form-check-inline`;
    }
    return className;
  };
}

export default EfeRadioButton;
