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

export interface CheckboxProps {
  classes?: string;
  disabled?: boolean;
  label?: string;
  id: string;
  inline?: boolean;
}

class EfeCheckbox extends Component<CheckboxProps, 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 checkbox.
   *   @prop { string }   id               - Required. Id of the checkbox component.
   *   @prop { boolean }  inline           - Optional.
   */

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

  /* Life Cycle Functions
   * ------------------------------------------------ */
  render() {
    const { label, id, disabled } = this.props;
    return (
      <div className={this._getClasses()}>
        <input
          type="checkbox"
          className="custom-control-input"
          id={id}
          disabled={disabled}
        />
        <label className="custom-control-label" htmlFor={id}>
          {label}
        </label>
      </div>
    );
  }

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

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

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

export default EfeCheckbox;
