function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';
var R = 15.915494309189533;
var C = 20;
var CIRCLE_PROPS = {
  cx: C,
  cy: C,
  r: R,
  fill: 'transparent',
  strokeWidth: 8
};
var SIZES = {
  s: 64,
  l: 215
};
var StyledSvg = styled.svg.withConfig({
  displayName: "ProgressDonutChart__StyledSvg",
  componentId: "sc-5hm7pl-0"
})(["transform:rotate(-90deg);circle:first-of-type{stroke:", ";}circle:nth-of-type(2){stroke:", ";animation:progress 0.5s ease-out forwards;}@keyframes progress{0%{stroke-dasharray:", ";}}"], function (t) {
  return t.theme.colorTokens.neutral.background_medium;
}, function (t) {
  return t.theme.colorTokens.action.background_default;
}, function (p) {
  return (p === null || p === void 0 ? void 0 : p.$initialStrokeDasharray) || '0 100';
});
var ProgressDonutChart = function ProgressDonutChart(_ref) {
  var completed = _ref.completed,
    _ref$total = _ref.total,
    total = _ref$total === void 0 ? 100 : _ref$total,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 's' : _ref$size;
  var sizePx = SIZES[size];
  var strokeDasharray = "".concat(100 * completed / total, " ").concat(100 * (1 - completed / total));
  var savedStrokeDasharray = useRef();
  useEffect(function () {
    savedStrokeDasharray.current = strokeDasharray;
  }, [strokeDasharray]);
  return React.createElement(StyledSvg, {
    width: sizePx,
    height: sizePx,
    viewBox: "0 0 ".concat(2 * C, " ").concat(2 * C),
    key: "".concat(size, ":").concat(completed),
    $initialStrokeDasharray: savedStrokeDasharray.current && savedStrokeDasharray.current !== strokeDasharray ? savedStrokeDasharray.current : undefined
  }, React.createElement("circle", CIRCLE_PROPS), completed > 0 && total > 0 && React.createElement("circle", _extends({}, CIRCLE_PROPS, {
    strokeDasharray: strokeDasharray
  })));
};
export default ProgressDonutChart;