/* animated-svg-container.tsx generated by @compiled/babel-plugin v0.40.0 */
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./animated-svg-container.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var namespaceUUID = 0;
var svgStyles = null;
var blurredStyles = null;
var notBlurredStyles = null;

/**
 * The bulk of this file is originally from
 * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
 * with modifications.
 */
var AnimatedSvgContainer = function AnimatedSvgContainer(_ref) {
  var palette = _ref.palette,
    isMoving = _ref.isMoving,
    isGlowing = _ref.isGlowing,
    className = _ref.className;
  var svgRef = (0, _react.useRef)(null);
  var namespaceId = (0, _react.useRef)();
  if (namespaceId.current === undefined) {
    namespaceId.current = namespaceUUID;
    namespaceUUID += 1;
  }
  (0, _react.useEffect)(function () {
    if (isMoving) {
      var svg = svgRef.current;

      // Schedule animation to begin before next browser paint
      var beginReq = requestAnimationFrame(function () {
        svg === null || svg === void 0 || svg.querySelectorAll('animate').forEach(function (node) {
          return node.beginElement();
        });
      });
      return function () {
        // Ensure any pending animation frame is cancelled as the element animation does not end properly if it
        // begins in the same event tick, i.e. isLoading synchronously changes to true then false.
        cancelAnimationFrame(beginReq);
        requestAnimationFrame(function () {
          svg === null || svg === void 0 || svg.querySelectorAll('animate').forEach(function (node) {
            return node.endElement();
          });
        });
      };
    }
    return undefined;
  }, [isMoving]);
  return /*#__PURE__*/React.createElement("svg", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: (0, _runtime.ax)(["_2rko19bv _kqswstnw", isGlowing ? "_1bsb1wgc _4t3i1wgc _154i1b66 _1ltv1b66 _kdam1rfl _w6ng15vq _t9ec161g" : "_1ltvidpf _154iidpf _1bsb1osq _4t3i1osq", className]),
    ref: svgRef,
    viewBox: "0 0 24 24",
    preserveAspectRatio: "none"
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
    id: "".concat(namespaceId.current, "_lg1"),
    gradientUnits: "userSpaceOnUse",
    x1: "0%",
    y1: "0",
    x2: "400%",
    y2: "0",
    spreadMethod: "reflect"
  }, /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "x1",
    from: "0%",
    to: "400%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "x2",
    from: "400%",
    to: "800%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0",
    stopColor: palette.blue
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.25",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.5",
    stopColor: palette.yellow
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.75",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "1",
    stopColor: palette.blue
  })), /*#__PURE__*/React.createElement("linearGradient", {
    id: "".concat(namespaceId.current, "_lg2"),
    gradientUnits: "userSpaceOnUse",
    x1: "0",
    y1: "-100%",
    x2: "0",
    y2: "300%",
    spreadMethod: "reflect"
  }, /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "y1",
    from: "-100%",
    to: "300%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "y2",
    from: "300%",
    to: "700%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0",
    stopColor: palette.blue
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.25",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.5",
    stopColor: palette.yellow
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.75",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "1",
    stopColor: palette.blue
  })), /*#__PURE__*/React.createElement("linearGradient", {
    id: "".concat(namespaceId.current, "_lg3"),
    gradientUnits: "userSpaceOnUse",
    x1: "300%",
    y1: "0",
    x2: "700%",
    y2: "0",
    spreadMethod: "reflect"
  }, /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "x1",
    from: "300%",
    to: "-100%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "x2",
    from: "700%",
    to: "300%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0",
    stopColor: palette.blue
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.25",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.5",
    stopColor: palette.yellow
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.75",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "1",
    stopColor: palette.blue
  })), /*#__PURE__*/React.createElement("linearGradient", {
    id: "".concat(namespaceId.current, "_lg4"),
    gradientUnits: "userSpaceOnUse",
    x1: "0",
    y1: "0",
    x2: "0",
    y2: "400%",
    spreadMethod: "reflect"
  }, /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "y1",
    from: "0%",
    to: "-400%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("animate", {
    begin: "indefinite",
    attributeName: "y2",
    from: "400%",
    to: "0%",
    repeatCount: "indefinite",
    dur: "3s"
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0",
    stopColor: palette.blue
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.25",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.5",
    stopColor: palette.yellow
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "0.75",
    stopColor: palette.teal
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "1",
    stopColor: palette.blue
  }))), /*#__PURE__*/React.createElement("g", {
    strokeWidth: "8"
  }, /*#__PURE__*/React.createElement("path", {
    stroke: "url(#".concat(namespaceId.current, "_lg1)"),
    d: "M0 0h24",
    vectorEffect: "non-scaling-stroke"
  }), /*#__PURE__*/React.createElement("path", {
    stroke: "url(#".concat(namespaceId.current, "_lg2)"),
    d: "M24 0v24",
    vectorEffect: "non-scaling-stroke"
  }), /*#__PURE__*/React.createElement("path", {
    stroke: "url(#".concat(namespaceId.current, "_lg3)"),
    d: "M24 24H0",
    vectorEffect: "non-scaling-stroke"
  }), /*#__PURE__*/React.createElement("path", {
    stroke: "url(#".concat(namespaceId.current, "_lg4)"),
    d: "M0 24V0",
    vectorEffect: "non-scaling-stroke"
  })));
};
var _default = exports.default = AnimatedSvgContainer;