"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Svg = exports.SvgBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("../core");
const utils_1 = require("../utils");
const cache_1 = __importDefault(require("./cache"));
const helpers_1 = require("./helpers");
exports.SvgBase = core_1.styled.svgBox(({ pathFill }) => {
    return (0, core_1.css) `
    ${pathFill !== undefined &&
        (Array.isArray(pathFill)
            ? pathFill
                .map((fill, index) => `
					& > path:nth-child(${index + 1}) {
						fill: ${fill};
					}
				`)
                .join()
            : `
				& > path {
					fill: ${pathFill};
				}
			`)}
  `;
});
/**
 * Displays an svg element based on provided children or 'src' prop.
 *
 * When using src, it loads the content from the given URL and saves in in cache.
 *
 * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
 */
exports.Svg = (0, core_1.vui)((props, ref) => {
    const { children, className, src } = props, rest = __rest(props, ["children", "className", "src"]);
    const [state, setState] = (0, react_1.useState)((0, helpers_1.initState)());
    const isMountedRef = (0, react_1.useRef)(false);
    const srcRef = (0, react_1.useRef)(src);
    const { content = '', svgAttributes = {} } = state;
    const innerHTML = !children ? { __html: content } : undefined;
    (0, react_1.useEffect)(() => {
        isMountedRef.current = true;
        return () => {
            isMountedRef.current = false;
        };
    }, []);
    (0, react_1.useEffect)(() => {
        srcRef.current = src;
        function loadSvg(src) {
            return __awaiter(this, void 0, void 0, function* () {
                try {
                    const response = yield cache_1.default.get(src);
                    const content = (0, helpers_1.getSvgContent)(response);
                    const svgEl = (0, helpers_1.stringToHTML)(response);
                    const svgAttributes = (0, helpers_1.getAttributes)(svgEl);
                    svgAttributes['data-src'] = src !== null && src !== void 0 ? src : '';
                    // Update state only when requested 'src' and current 'src' are the same
                    if (srcRef.current === src && isMountedRef.current) {
                        setState({ content, svgAttributes });
                    }
                }
                catch (error) {
                    console.error(error); // eslint-disable-line no-console
                    if (isMountedRef.current) {
                        setState((0, helpers_1.initState)());
                    }
                }
            });
        }
        src && loadSvg(src);
    }, [src]);
    return ((0, jsx_runtime_1.jsx)(exports.SvgBase, Object.assign({ className: (0, utils_1.cs)('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest, { children: children })));
});
exports.Svg.displayName = 'Svg';
exports.default = exports.Svg;
//# sourceMappingURL=svg.js.map