import React from 'react';
import { isIE11 } from "../../../lib/client";
import { SpinnerFallbackAnimationRunner, createOffsetAnimation, createLengthAnimation, createColorAnimation, createRotationAnimation } from "../../../components/Spinner/SpinnerFallbackAnimation";
import { isTestEnv } from "../../../lib/currentEnvironment";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { styles } from "../SpinnerIcon.styles";
export var 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;
};
export var 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.useRef(null);
  if (isIE11 && !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.useRef(null);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    var _React$useContext = React.useContext(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.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 SpinnerFallbackAnimationRunner([createOffsetAnimation(0, -230, 1000, setStyleProperty, '%'), createLengthAnimation([62, 168], [187, 43], 2000, setStyleProperty, '%'), createRotationAnimation(0, 360, 2000, setStyleProperty)].concat(dimmed ? [] : [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.createElement("span", {
      className: cx(styles.root(), (_cx = {}, _cx[styles.rootInline()] = inline, _cx))
    }, /*#__PURE__*/
    React.createElement("svg", {
      viewBox: "0 0 " + currentSize.size + " " + currentSize.size,
      className: cx(styles.icon(), className, (_cx2 = {}, _cx2[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.createElement("circle", {
      cx: currentSize.size / 2,
      cy: currentSize.size / 2,
      r: currentSize.radius
    })))
  );
};