import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["size", "noBorderRadius", "invisibleTrack", "value", "minValue", "maxValue", "textValue", "className"];
import * as React from 'react';
import classNames from 'classnames';

var getTransitionDuration = function getTransitionDuration(minValue, maxValue, trackRef) {
  if (!trackRef.current || !trackRef.current.clientWidth) {
    return;
  }

  var stepWidth = trackRef.current.clientWidth / (maxValue - minValue);

  if (stepWidth >= 600) {
    return '1000ms';
  }

  return "".concat(Math.floor(stepWidth / 100) * 100 + 400, "ms");
};

var ProgressBar = function ProgressBar(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 's' : _ref$size,
      noBorderRadius = _ref.noBorderRadius,
      invisibleTrack = _ref.invisibleTrack,
      value = _ref.value,
      _ref$minValue = _ref.minValue,
      minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
      _ref$maxValue = _ref.maxValue,
      maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
      textValue = _ref.textValue,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, _excluded);

  var trackRef = React.useRef(null);

  var _React$useState = React.useState(function () {
    return getTransitionDuration(minValue, maxValue, trackRef);
  }),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      transitionDuration = _React$useState2[0],
      setTransitionDuration = _React$useState2[1];

  React.useEffect(function () {
    setTransitionDuration(getTransitionDuration(minValue, maxValue, trackRef));
  }, [minValue, maxValue]);
  var trackClass = classNames('sg-progress-bar', "sg-progress-bar--".concat(String(size)), {
    'sg-progress-bar--no-border-radius': noBorderRadius,
    'sg-progress-bar--invisible-track': invisibleTrack
  });
  var barWidth = Math.round((value - minValue) / (maxValue - minValue) * 100);
  var barBorderRadius = barWidth === 100 && noBorderRadius ? '0' : '0 8px 8px 0';
  var barStyle = {
    width: "".concat(barWidth, "%"),
    borderRadius: barBorderRadius,
    transitionDuration: transitionDuration
  };
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: classNames(trackClass, className),
    role: "progressbar",
    "aria-valuemin": minValue,
    "aria-valuemax": maxValue,
    "aria-valuenow": value,
    "aria-valuetext": textValue || String(value),
    ref: trackRef
  }), /*#__PURE__*/React.createElement("div", {
    className: classNames('sg-progress-bar__bar'),
    style: barStyle
  }));
};

export default ProgressBar;