"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styleConstants_1 = require("./styleConstants");
exports.LoadingIndicator = function (props) {
    var height = props.height || "32";
    if (typeof height === "number") {
        height = height.toString();
    }
    var width = props.width || height;
    if (typeof width === "number") {
        width = width.toString();
    }
    var getCenterY = function () {
        return Math.floor(parseInt(height, 10) / 2).toString();
    };
    var getViewbox = function () {
        return "0 0 " + width + " " + height;
    };
    var getCircleRadius = function () {
        return Math.floor(parseInt(height, 10) / 8).toString();
    };
    var getAnimatedCircleRadius = function () {
        var circleR = getCircleRadius();
        return "0; " + circleR + "; 0; 0";
    };
    var getCircleOffsetX = function (circleNum) {
        return Math.floor((parseInt(width, 10) / 4) * circleNum).toString();
    };
    var getCircleTranslate = function (circleNum) {
        var translateX = getCircleOffsetX(circleNum + 1);
        return "translate(" + translateX + " 0)";
    };
    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: getViewbox(), width: width, height: height, fill: styleConstants_1.colors.accent.CIVIL_TEAL, className: props.className, style: { verticalAlign: props.inline ? "middle" : undefined } },
        React.createElement("circle", { transform: getCircleTranslate(0), cx: "0", cy: getCenterY(), r: "0" },
            React.createElement("animate", { attributeName: "r", values: getAnimatedCircleRadius(), dur: "1.2s", repeatCount: "indefinite", begin: "0", keyTimes: "0;0.2;0.7;1", keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8", calcMode: "spline" })),
        React.createElement("circle", { transform: getCircleTranslate(1), cx: "0", cy: getCenterY(), r: "0" },
            React.createElement("animate", { attributeName: "r", values: getAnimatedCircleRadius(), dur: "1.2s", repeatCount: "indefinite", begin: "0.3", keyTimes: "0;0.2;0.7;1", keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8", calcMode: "spline" })),
        React.createElement("circle", { transform: getCircleTranslate(2), cx: "0", cy: getCenterY(), r: "0" },
            React.createElement("animate", { attributeName: "r", values: getAnimatedCircleRadius(), dur: "1.2s", repeatCount: "indefinite", begin: "0.6", keyTimes: "0;0.2;0.7;1", keySplines: "0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8", calcMode: "spline" }))));
};
//# sourceMappingURL=LoadingIndicator.js.map