import React, { useMemo } from 'react';
import "./index.less";
var RATE_SEGMENTS = Array.from({
  length: 10
}, function (_, index) {
  return index;
});
var calculateSegments = function calculateSegments(usage, total, color) {
  var percent = Math.min((parseFloat(String(total)) ? usage / total : 0) * 100, 100);
  return RATE_SEGMENTS.map(function (index) {
    var current = (index + 1) * 10 - percent;
    if (current >= 10 || total === 0) {
      return /*#__PURE__*/React.createElement("span", {
        key: index,
        className: "unit",
        style: {
          backgroundColor: color,
          opacity: 0.1
        }
      });
    }
    if (current > 0 && current < 10) {
      return /*#__PURE__*/React.createElement("span", {
        className: "unit-percent",
        key: index
      }, /*#__PURE__*/React.createElement("span", {
        className: "unit unit-active",
        style: {
          width: "".concat(100 - current * 10, "%"),
          backgroundColor: color
        }
      }), /*#__PURE__*/React.createElement("span", {
        className: "unit",
        style: {
          width: "".concat(current * 10, "%"),
          backgroundColor: color,
          opacity: 0.1
        }
      }));
    }
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      className: "unit unit-active",
      style: {
        backgroundColor: color
      }
    });
  });
};
var ResourceProgress = function ResourceProgress(_ref) {
  var _ref$usage = _ref.usage,
    usage = _ref$usage === void 0 ? 1 : _ref$usage,
    _ref$total = _ref.total,
    total = _ref$total === void 0 ? null : _ref$total,
    _ref$aliasName = _ref.aliasName,
    aliasName = _ref$aliasName === void 0 ? '' : _ref$aliasName,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? '#7fc8f3' : _ref$color,
    width = _ref.width,
    _ref$direction = _ref.direction,
    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
  var segments = useMemo(function () {
    return total == null ? null : calculateSegments(usage, total, color);
  }, [usage, total, color]);
  if (total == null) {
    return /*#__PURE__*/React.createElement("span", null, "--");
  }
  var percentText = total ? "".concat(((usage / total || 0) * 100).toFixed(1), "%") : '0%';
  var usageText = total ? "".concat(usage, "/ ").concat(total) : "".concat(usage, "/ 0");
  if (direction === 'horizontal') {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      style: {
        width: width
      },
      className: "resource-progress-container resource-horizontal ".concat(className)
    }, /*#__PURE__*/React.createElement("div", {
      className: "resource-progress"
    }, segments), /*#__PURE__*/React.createElement("div", {
      className: "resource-progress-unit",
      style: {
        color: 'rgba(0,0,0,0.85)'
      }
    }, percentText)), /*#__PURE__*/React.createElement("div", {
      className: "resource-vertical"
    }, /*#__PURE__*/React.createElement("span", null, usageText)));
  }
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: width
    },
    className: "resource-progress-container ".concat(className)
  }, /*#__PURE__*/React.createElement("div", {
    className: "resource-progress"
  }, segments), /*#__PURE__*/React.createElement("div", {
    className: "resource-vertical"
  }, /*#__PURE__*/React.createElement("span", {
    className: "resource-text"
  }, aliasName), /*#__PURE__*/React.createElement("span", null, percentText)));
};
export default ResourceProgress;