import * as React from "react";
import { useState, useEffect } from "react";
import { FEAGlobals } from "../../../common/Globals";
/**
 * Returns an image that will reload itself based on messages on the "Finsemble-ui-change.toolbarIconUpdate" topic. This
 * is useful for dynamic theming. Otherwise this behaves just like an `<img>` tag.
 */
export const ToolbarIcon = ({ src, children, alt = "File menu", ...other }) => {
    const [uniqueSrc, setSrc] = useState(src);
    const [documentRoot, setDocumentRoot] = useState("../..");
    useEffect(() => {
        const getDocumentRoot = async () => {
            const { data } = await FEAGlobals.FSBL.Clients.ConfigClient.get(["finsemble", "documentRoot"]);
            setDocumentRoot(data);
        };
        getDocumentRoot();
    }, []);
    useEffect(() => {
        const handler = () => {
            setSrc(`${src}?${Date.now()}`);
        };
        FEAGlobals.FSBL.Clients.RouterClient.addListener("Finsemble-ui-change.toolbarIconUpdate", handler);
        return () => {
            FEAGlobals.FSBL.Clients.RouterClient.removeListener("Finsemble-ui-change.toolbarIconUpdate", handler);
        };
    }, [src]);
    const srcUrl = uniqueSrc.includes("/") ? uniqueSrc : `${documentRoot}/assets/img/${uniqueSrc}`;
    return (React.createElement("img", { src: srcUrl, alt: alt, ...other }, children));
};
//# sourceMappingURL=ToolbarIcon.js.map