"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @category communication
 * @component progress-bar
 * @variations collab-ui-react
 */
var ProgressBar = function ProgressBar(props) {
  var label = props.label,
      min = props.min,
      max = props.max,
      value = props.value,
      dynamic = props.dynamic,
      displayFormat = props.displayFormat,
      color = props.color;
  var adjustedValue = max - value < 0 ? max : value;
  var valueFraction = adjustedValue / max * 100 || 0;
  var meterWidth = valueFraction + '%';

  var getDisplayFormat = function getDisplayFormat() {
    if (displayFormat === 'none') {
      return null;
    } else if (displayFormat === 'percentage') {
      return meterWidth;
    }

    return adjustedValue + " / " + max;
  };

  var getColor = function getColor() {
    if (color) {
      return color;
    } else if (dynamic) {
      if (valueFraction < 25) {
        return 'success';
      } else if (valueFraction < 50) {
        return 'info';
      } else if (valueFraction < 75) {
        return 'warning';
      }

      return 'danger';
    }
  };

  return _react.default.createElement("span", null, _react.default.createElement("div", {
    className: "progressbar-info",
    key: 0
  }, _react.default.createElement("span", {
    className: "progressbar-label"
  }, label), _react.default.createElement("span", {
    className: "progressbar-progress"
  }, getDisplayFormat())), _react.default.createElement("div", {
    className: "progress" + (" " + (getColor() || '')),
    key: 1
  }, _react.default.createElement("span", {
    className: "meter",
    role: "progressbar",
    "aria-labelledby": "progressbar",
    "aria-valuenow": adjustedValue,
    "aria-valuemin": min,
    "aria-valuemax": max,
    "aria-valuetext": meterWidth,
    style: {
      width: meterWidth
    }
  })));
};

ProgressBar.propTypes = {
  /** @prop Color class optional that will overwrite dynamic | '' */
  color: _propTypes.default.string,

  /** @prop Format of dyanmic number | 'fraction' */
  displayFormat: _propTypes.default.oneOf(['none', 'fraction', 'percentage']),

  /** @prop Determines if the ProgressBar is dynamic | false */
  dynamic: _propTypes.default.bool,

  /** @prop Label text */
  label: _propTypes.default.string.isRequired,

  /** @prop Maximum number for progressBar | 100 */
  max: _propTypes.default.number,

  /** @prop Minimum number for progressBar | 0 */
  min: _propTypes.default.number,

  /** @prop Type of ProgressBar | 'determinate' */
  type: _propTypes.default.oneOf(['determinate', 'indeterminate']),

  /** @prop Number value */
  value: _propTypes.default.number.isRequired
};
ProgressBar.defaultProps = {
  color: '',
  displayFormat: 'fraction',
  dynamic: false,
  max: 100,
  min: 0,
  type: 'determinate'
};
ProgressBar.displayName = 'ProgressBar';
var _default = ProgressBar;
/**
* @name Progress Bar Default
*
* @category communication
* @component progress-bar
* @section default
*
* @js

export default function() {
  return (
    <div className='columns small-6'>
      <ProgressBar
        label='ProgressBar Default'
        min={0}
        max={100}
        value={50}
      />
    </div>
  );
}

**/

/**
* @name Progress Bar Dynamic Colors
*
* @category communication
* @component progress-bar
* @section Dynamic Colors
*
* @js

import {
  Button
} from '@collab-ui/react';

export default class Default extends React.PureComponent{
  state= {
    pbValue: 0
  }

  render() {
    return (
      <div>
        <Button
          children='Randomize'
          onClick={() => this.setState({pbValue: Math.floor(Math.random() * (101))})}
          ariaLabel='Randomize'
          color='primary'
        />
        <div className='columns small-6'>
          <ProgressBar
            label='ProgressBar Default'
            value={this.state.pbValue}
            dynamic
          />
        </div>
      </div>
    );
  }
}

**/

/**
* @name Progress Bar Static Color
*
* @category communication
* @component progress-bar
* @section Static Color
*
* @js

export default function() {
  return (
    <div className='columns small-6'>
      <ProgressBar
        label='ProgressBar Static'
        value={50}
        color='danger'
      />
    </div>
  );
}

**/

/**
* @name Progress Bar Percentage Display
*
* @category communication
* @component progress-bar
* @section Percentage Display
*
* @js

export default function() {
  return (
    <div className='columns small-6'>
      <ProgressBar
        label='ProgressBar Percentage'
        value={50}
        displayFormat='percentage'
      />
    </div>
  );
}

**/

/**
* @name Progress Bar No Display
*
* @category communication
* @component progress-bar
* @section No Display
*
* @js

export default function() {
  return (
    <div className='columns small-6'>
      <ProgressBar
        label='ProgressBar Display None'
        value={75}
        displayFormat='none'
      />
    </div>
  );
}

**/

/**
* @name Progress Bar Min Max Modified
*
* @category communication
* @component progress-bar
* @section Min Max Modified
*
* @js

export default function() {
  return (
    <div className='columns small-6'>
      <ProgressBar
        label='ProgressBar Min Max'
        min={0}
        max={250}
        value={125}
      />
    </div>
  );
}

**/

/**
* @name Progress Bar Determinate/Indeterminate
*
* @category communication
* @component progress-bar
* @section Determinate/Indeterminate
*
* @js

export default function() {
  return (
    <div className='columns small-6'>
      <div>Pending: Determinate/Indeterminate Need to Have CSS Styles Defined in Collab-UI</div>
      <ProgressBar
        label='ProgressBar Determinate/Indeterminate'
        value={60}
        displayFormat='percentage'
      />
    </div>
  );
}

**/

exports.default = _default;