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

interface ButtonProps {
  children?: any;
  disabled?: boolean;
  fontSize?: number;
  handleOnClick: any;
  handleOnMouseDown?: any;
  handleOnMouseLeave?: any;
  handleOnMouseUp?: any;
  id?: string;
  blockButton?: any;
  circleButton?: any;
  classes: any;
  color?: any;
  fullWidth?: any;
}

export default class EfeButton extends Component<any, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { boolean }   blockButton         - Optional. Informs the button to apply block button class.
   *   @prop { boolean }   circleButton        - Optional. Informs the button to apply block and circle button classes.
   *   @prop { string }    classes             - Optional. String value added to the classes.
   *   @prop { string }    color               - Optional. Informs the button to apply the given color class.  See color variables.
   *   @prop { boolean }   disabled            - Optional. Informs the button to apply the disabled attribute.
   *   @prop { function }  handleOnClick       - Required. Adds an on click event handler on the button.
   *   @prop { function }  handleOnMouseDown   - Optional. Adds an on mouseDown event handler on the button.
   *   @prop { function }  handleOnMouseUp     - Optional. Adds an on mouseUp event handler on the button.
   *   @prop { string }    type                - Optional. Button type. Defined value: button,submit. Default value: button.

   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    circleButton: PropTypes.string,
    classes: PropTypes.string,
    disabled: PropTypes.bool,
    handleOnClick: PropTypes.func.isRequired,
    handleOnMouseDown: PropTypes.func,
    handleOnMouseUp: PropTypes.func,
  };

  /* Life Cycle Functions
   * ------------------------------------------------ */

  render() {
    const {
      children,
      disabled,
      fontSize,
      handleOnClick,
      handleOnMouseDown,
      handleOnMouseLeave,
      handleOnMouseUp,
      id,
      type,
    } = this.props;
    let buttonType = buttonTypes.includes(type) ? type : "button";
    return (
      <button
        className={this._getClasses()}
        disabled={disabled || false}
        id={id || ""}
        onClick={handleOnClick}
        onMouseDown={handleOnMouseDown || null}
        onMouseLeave={handleOnMouseLeave || null}
        onMouseUp={handleOnMouseUp || null}
        style={{ fontSize: fontSize || "inherit" }}
        type={buttonType}
      >
        {children}
      </button>
    );
  }

  /* Components Functions
   * ------------------------------------------------ */

  _getClasses = () => {
    const { rounded, classes } = this.props;

    let className = `efe-button ${classes || ""}`;

    if (rounded) {
      className += " efe-rounded-button";
    }

    return className;
  };
}
