"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.sizes = exports.SpinnerIcon = void 0;var _react = _interopRequireDefault(require("react"));

var _client = require("../../lib/client");
var _SpinnerFallbackAnimation = require("../../components/Spinner/SpinnerFallbackAnimation");






var _currentEnvironment = require("../../lib/currentEnvironment");
var _ThemeContext = require("../../lib/theming/ThemeContext");
var _Emotion = require("../../lib/theming/Emotion");

var _SpinnerIcon = require("./SpinnerIcon.styles");
















var sizes = exports.sizes = {
  big: {
    size: 96,
    width: 4,
    radius: 32
  },
  normal: {
    size: 48,
    width: 2,
    radius: 16
  },
  mini: {
    size: 16,
    width: 1.5,
    radius: 6
  }
};

var isSizeAlias = function isSizeAlias(size) {
  return typeof size === 'string' && size in sizes;
};

var SpinnerIcon = exports.SpinnerIcon = function SpinnerIcon(_ref) {var _cx, _cx2;var size = _ref.size,className = _ref.className,dimmed = _ref.dimmed,inline = _ref.inline,width = _ref.width,color = _ref.color;
  var _size = isSizeAlias(size) ? sizes[size] : size;
  var currentSize = inline ? sizes.mini : _size;
  var svgRef = _react.default.useRef(null);

  if (_client.isIE11 && !_currentEnvironment.isTestEnv) {
    // This condition will not change during app's life time
    // So its OK to use hooks here
    // https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

    // eslint-disable-next-line react-hooks/rules-of-hooks
    var fallbackAnimationRef = _react.default.useRef(null);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    var _React$useContext = _react.default.useContext(_ThemeContext.ThemeContext),red = _React$useContext.red,yellow = _React$useContext.yellow,green = _React$useContext.green,brand = _React$useContext.brand;
    // eslint-disable-next-line react-hooks/rules-of-hooks
    _react.default.useEffect(function () {
      var svg = svgRef.current;

      var setStyleProperty = function setStyleProperty() {
        if (svg) {var _svg$style;
          (_svg$style = svg.style).setProperty.apply(_svg$style, arguments);
        }
      };

      fallbackAnimationRef.current = new _SpinnerFallbackAnimation.SpinnerFallbackAnimationRunner([

      (0, _SpinnerFallbackAnimation.createOffsetAnimation)(0, -230, 1000, setStyleProperty, '%'),
      (0, _SpinnerFallbackAnimation.createLengthAnimation)([62, 168], [187, 43], 2000, setStyleProperty, '%'),
      (0, _SpinnerFallbackAnimation.createRotationAnimation)(0, 360, 2000, setStyleProperty)].concat(
        dimmed ? [] : [(0, _SpinnerFallbackAnimation.createColorAnimation)([red, yellow, green, brand], 1500, setStyleProperty)]),

      1000 / 60
      );

      return function () {
        var fallbackAnimation = fallbackAnimationRef.current;
        if (fallbackAnimation) {
          fallbackAnimation.stop();
        }
        if (svg) {
          svg.removeAttribute('style');
        }
      };
    }, [dimmed, red, yellow, green, brand]);
  }

  return /*#__PURE__*/(
    _react.default.createElement("span", { className: (0, _Emotion.cx)(_SpinnerIcon.styles.root(), (_cx = {}, _cx[_SpinnerIcon.styles.rootInline()] = inline, _cx)) }, /*#__PURE__*/
    _react.default.createElement("svg", {
      viewBox: "0 0 " + currentSize.size + " " + currentSize.size,
      className: (0, _Emotion.cx)(_SpinnerIcon.styles.icon(), className, (_cx2 = {}, _cx2[
      _SpinnerIcon.styles.iconInline()] = inline, _cx2)
      ),
      width: currentSize.size,
      height: currentSize.size,
      fill: "none",
      stroke: color,
      strokeDasharray: 10 * currentSize.radius / 6 + ", " + 27 * currentSize.radius / 6,
      strokeDashoffset: "0",
      strokeWidth: width || currentSize.width,
      ref: svgRef,
      focusable: "false",
      "aria-hidden": "true" }, /*#__PURE__*/

    _react.default.createElement("circle", { cx: currentSize.size / 2, cy: currentSize.size / 2, r: currentSize.radius })
    )
    ));

};