import { isString } from "lodash-es";
import { createElement, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";
import { useMap } from "react-map-gl/maplibre";
import { useSafeSvgParser } from "./use-safe-svg-parser.js";
import { DEFAULT_INPUT_ICON_SIZE } from "../constants.js";
import { attachImageToMap } from "../functions/attach-image-to-map.js";
import { createBitmapConfigOptions } from "../functions/create-bitmap-config-options.js";
import { getDataUri } from "../functions/get-data-uri.js";
import { getScaledSymbolSize } from "../functions/get-scaled-symbol-size.js";
const useAttachImageFromIcon = (icon, suffix, outputSize) => {
  const { elementAsString, ref } = useSafeSvgParser();
  const defaultScaledIconSize = getScaledSymbolSize();
  const { current: map } = useMap();
  const img = new Image(defaultScaledIconSize, defaultScaledIconSize);
  const fakeDomContainer = document.createElement("div");
  useLayoutEffect(() => {
    if (isString(icon)) {
      return;
    }
    const reactNodeRefContainer = createElement("div", { ref }, icon);
    const root = createRoot(fakeDomContainer);
    root.render(reactNodeRefContainer);
  }, [icon]);
  fakeDomContainer.remove();
  const stringUrl = getDataUri(elementAsString);
  img.addEventListener("load", () => {
    createImageBitmap(
      img,
      0,
      0,
      DEFAULT_INPUT_ICON_SIZE,
      DEFAULT_INPUT_ICON_SIZE,
      createBitmapConfigOptions(outputSize)
    ).then((bitmap) => {
      const iconName = `custom-icon-${suffix}`;
      attachImageToMap(map, bitmap, iconName);
    });
  });
  img.src = stringUrl;
  return !isString(icon);
};
export {
  useAttachImageFromIcon
};
//# sourceMappingURL=use-attach-image-from-icon.js.map
