"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var shimmer_module_scss_1 = (0, tslib_1.__importDefault)(require("./styles/shimmer.module.scss"));
// These constants are taken from generic shimmer design.
var SHIMMER_WIDTH_DEFAULT = 100;
var SHIMMER_HEIGHT_DEFAULT = 100;
var SHIMMER_RECTANGLE_HEIGHT_MAX = 16;
var SHIMMER_RECTANGLE_COUNT = 4;
var SHIMMER_ELEMENT_COUNT = 2 * SHIMMER_RECTANGLE_COUNT + 1;
var RECTANGLE_X = 8;
var SHIMMER_MAIN_RECTANGLE_SIZE_RATIO = 0.9;
var RECTANGLE_1_LENGTH = 20;
var RECTANGLE_2_LENGTH = 40;
var RECTANGLE_3_LENGTH = 90;
var RECTANGLE_4_LENGTH = 80;
/**
 * Class to create shimmers for applications.
 *
 * @internal
 */
var ShimmerFactory = /** @class */ (function () {
    function ShimmerFactory() {
    }
    /**
     *  Method that creates a shimmer for applications using an svg.
     * @param width - Width of the shimmer
     * @param height - Height of the shimmer
     * @param componentTag - ID for the shimmer
     * @param loadingMessage - Displays message when the shimmer loads
     */
    ShimmerFactory.createShimmer = function (width, height, componentTag, loadingMessage, containerMargin) {
        if (containerMargin === void 0) { containerMargin = undefined; }
        width = width || SHIMMER_WIDTH_DEFAULT;
        height = height || SHIMMER_HEIGHT_DEFAULT;
        var shimmerContainerDiv = document.createElement('div');
        shimmerContainerDiv.className = shimmer_module_scss_1.default.shimmerContainer;
        var shimmerDiv = document.createElement('div');
        var mainRectangleHeight = height * SHIMMER_MAIN_RECTANGLE_SIZE_RATIO;
        var rectangleHeight = mainRectangleHeight / SHIMMER_ELEMENT_COUNT;
        rectangleHeight = Math.min(SHIMMER_RECTANGLE_HEIGHT_MAX, rectangleHeight);
        var gap = 2 * rectangleHeight;
        var rectangle1Y = rectangleHeight;
        var rectangle2Y = rectangle1Y + gap;
        var rectangle3Y = rectangle2Y + gap;
        var rectangle4Y = rectangle3Y + gap;
        var className = shimmer_module_scss_1.default.shimmerElementFill;
        shimmerDiv.innerHTML = "<svg width=".concat(width, " height=").concat(height, " viewBox=\"0 0 ").concat(width, " ").concat(height, "\" version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <title>").concat(loadingMessage, "</title>\n        <g id=").concat(componentTag, "_Shimmer stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <rect x=\"0\" y=\"0\" width=").concat(width, " height=").concat(height, "></rect>\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_1', className, RECTANGLE_X, rectangle1Y, RECTANGLE_1_LENGTH, rectangleHeight), "\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_2', className, RECTANGLE_X, rectangle2Y, RECTANGLE_2_LENGTH, rectangleHeight), "\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_3', className, RECTANGLE_X, rectangle3Y, RECTANGLE_3_LENGTH, rectangleHeight), "\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_4', className, RECTANGLE_X, rectangle4Y, RECTANGLE_4_LENGTH, rectangleHeight), "\n        </g>\n      </svg>");
        if (containerMargin !== undefined) {
            shimmerContainerDiv.style.margin = containerMargin + '';
        }
        shimmerContainerDiv.appendChild(shimmerDiv);
        var shimmerAccessibilityContainerDiv = document.createElement('div');
        shimmerAccessibilityContainerDiv.setAttribute('role', 'status');
        shimmerAccessibilityContainerDiv.setAttribute('aria-live', 'polite');
        shimmerContainerDiv.appendChild(shimmerAccessibilityContainerDiv);
        return shimmerContainerDiv;
    };
    ShimmerFactory._shimmerRect = function (id, className, x, y, width, height) {
        return "<rect id=".concat(id, " class=").concat(className, " x=").concat(x, " y=").concat(y, " width=\"").concat(width, "%\" height=").concat(height, ">\n      <animate\n      attributeName=\"opacity\"\n      dur=\"1s\"\n      values=\"0.2;0.5;0.9\"\n      repeatCount=\"indefinite\"\n      begin=\"0\"/>\n    </rect>");
    };
    return ShimmerFactory;
}());
exports.default = ShimmerFactory;
//# sourceMappingURL=ShimmerFactory.js.map