/* animated-svg-container.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./animated-svg-container.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useRef } from 'react';
let namespaceUUID = 0;
const svgStyles = null;
const blurredStyles = null;
const notBlurredStyles = null;

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

      // Schedule animation to begin before next browser paint
      const beginReq = requestAnimationFrame(() => {
        svg === null || svg === void 0 ? void 0 : svg.querySelectorAll('animate').forEach(node => node.beginElement());
      });
      return () => {
        // 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(() => {
          svg === null || svg === void 0 ? void 0 : svg.querySelectorAll('animate').forEach(node => node.endElement());
        });
      };
    }
    return undefined;
  }, [isMoving]);
  return /*#__PURE__*/React.createElement("svg", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: 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: `${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: `${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: `${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: `${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(#${namespaceId.current}_lg1)`,
    d: "M0 0h24",
    vectorEffect: "non-scaling-stroke"
  }), /*#__PURE__*/React.createElement("path", {
    stroke: `url(#${namespaceId.current}_lg2)`,
    d: "M24 0v24",
    vectorEffect: "non-scaling-stroke"
  }), /*#__PURE__*/React.createElement("path", {
    stroke: `url(#${namespaceId.current}_lg3)`,
    d: "M24 24H0",
    vectorEffect: "non-scaling-stroke"
  }), /*#__PURE__*/React.createElement("path", {
    stroke: `url(#${namespaceId.current}_lg4)`,
    d: "M0 24V0",
    vectorEffect: "non-scaling-stroke"
  })));
};
export default AnimatedSvgContainer;