import _times from "lodash/fp/times";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import style from './style.css';
const ProgressBar = props => {
  const {
    className,
    value,
    max,
    desc = '',
    steps = 0,
    style: propsStyle,
    displayInfo = true
  } = props;
  const ratio = value / max;
  const percentage = Math.floor(ratio * 100);
  const text = `${percentage}%`;
  const stepList = _times(index => /*#__PURE__*/React.createElement("div", {
    className: style.step,
    key: index
  }), steps);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(style.background, className),
    "data-name": "progress-bar-wrapper",
    "data-content": `${text}`
  }, /*#__PURE__*/React.createElement("div", {
    className: style.progress,
    style: {
      ...propsStyle,
      width: `${ratio * 100}%`
    }
  }), displayInfo ? /*#__PURE__*/React.createElement("p", {
    className: style.texts
  }, /*#__PURE__*/React.createElement("span", {
    className: style.description
  }, `${value}/${max} ${desc}`), /*#__PURE__*/React.createElement("span", {
    className: style.percentage
  }, text)) : null, /*#__PURE__*/React.createElement("div", {
    className: style.steps
  }, stepList));
};
ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
  className: PropTypes.string,
  value: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  desc: PropTypes.string,
  steps: PropTypes.number,
  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  displayInfo: PropTypes.bool
} : {};
export default ProgressBar;
//# sourceMappingURL=index.js.map