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

export default class EfeProgressbar extends Component<any, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { boolean }   animated                 - Optional. Animation of progressbar. Default value: false
   *   @prop { string  }   classes                  - Optional. String value added to the classes.
   *   @prop { string  }   color                    - Optional. Color of the progressbar component. Defined colors: primary, secondary, success, info, warning, danger, ligth. Default value: primary
   *   @prop { string  }   height                   - Optional. Height of the progressbar component.
   *   @prop { string  }   percent                  - Optional. Percentage value of Progressbar
   *   @prop { boolean }   percentIsActive          - Optional. Makes the value appear above the Progressbar.
   *   @prop { string  }   progressWidth            - Optional. Size value of Progressbar
   *   @prop { boolean }   striped                  - Optional. Adds a stripe to the progressbar.
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    animation: PropTypes.bool,
    classes: PropTypes.string,
    color: PropTypes.string,
    height: PropTypes.string,
    percent: PropTypes.string,
    percentIsActive: PropTypes.bool,
    progressWidth: PropTypes.string
  };

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

  render() {
    const { height, percent, progressWidth, percentIsActive } = this.props;
    return (
      <div
        className="mb-3 progress"
        style={{ width: `${progressWidth}%`, height: height }}
      >
        <div
          className={this._getClasses()}
          role="progressbar"
          style={{
            width: `${percent}%`,
            height: height,
            justifyItems: "center"
          }}
        >
          {percentIsActive ? `${percent}%` : ""}
        </div>
      </div>
    );
  }

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

  _getClasses = () => {
    const { animated, color, striped } = this.props;

    let className = "progress-bar";

    if (animated) {
      className += " progress-bar-striped progress-bar-animated";
    }

    if (color) {
      className += ` efe-progress-bar-${color}`;
    }

    if (striped) {
      className += " progress-bar-striped";
    }

    return className;
  };
}
