import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
import { getColorsLabels, getShades } from "../styles/colors";
import getClasses from "./styles";
import useTheme from "../styles/useTheme";
ChartJS.register(ArcElement, Tooltip, Legend);
var colorsList = getColorsLabels(true);
var shadesList = getShades(true);

var RoundedProgressBar = function RoundedProgressBar(props) {
  var size = props.size,
      children = props.children;
  var value = props.value,
      color = props.color,
      shade = props.shade,
      progressesArray = props.progressesArray,
      className = props.className;
  var classes = getClasses({
    size: size
  });

  var _useTheme = useTheme(),
      colors = _useTheme.cleverUI.colors;

  return /*#__PURE__*/React.createElement("div", {
    className: classnames(classes.root, className)
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.childrenContainer
  }, children), /*#__PURE__*/React.createElement("div", {
    className: classes.chartContainer
  }, /*#__PURE__*/React.createElement(Doughnut, {
    data: {
      datasets: [{
        data: progressesArray ? progressesArray.map(function (elem) {
          return elem.value;
        }).reverse() : [value, 100 - value].reverse(),
        backgroundColor: progressesArray ? progressesArray.map(function (elem) {
          var _elem$shade;

          return colors[elem.color][(_elem$shade = elem.shade) !== null && _elem$shade !== void 0 ? _elem$shade : 500];
        }).reverse() : [colors[color][shade !== null && shade !== void 0 ? shade : 500], colors.neutral[300]].reverse()
      }]
    },
    options: {
      events: [],
      cutout: "99%",
      borderRadius: {
        innerStart: 16,
        outerStart: 16,
        innerEnd: 1,
        outerEnd: 1
      },
      borderAlign: "center",
      borderWidth: 4,
      rotation: 0,
      borderColor: progressesArray ? progressesArray.map(function (elem) {
        var _elem$shade2;

        return colors[elem.color][(_elem$shade2 = elem.shade) !== null && _elem$shade2 !== void 0 ? _elem$shade2 : 500];
      }).reverse() : [colors[color][shade !== null && shade !== void 0 ? shade : 500], colors.neutral[300]].reverse(),
      plugins: {
        legend: {
          display: false
        }
      }
    }
  })));
};

RoundedProgressBar.propTypes = {
  size: PropTypes.number.isRequired,
  color: PropTypes.oneOf(colorsList),
  shade: PropTypes.oneOf(shadesList),
  value: PropTypes.number,
  progressesArray: PropTypes.instanceOf(Object)
};
RoundedProgressBar.defaultProps = {
  color: "green",
  shade: 500,
  value: 0,
  progressesArray: null
};
export default RoundedProgressBar;