import { useState as D, useEffect as L, useLayoutEffect as P } from "react";
import { useMapContext as f } from "../../../MapContext.js";
import { useUpdateProp as E, useUpdateEventListenerMap as I } from "../../../../utils/hooks.js";
const T = (e) => new H.clustering.DataPoint(e.lat, e.lng, 1, e), p = (e, t = T) => e.map((r, n) => t(r, n)), C = new H.clustering.Provider([]).getTheme(), R = (e) => {
  switch (e) {
    case "GRID":
      return H.clustering.Provider.Strategy.GRID;
    case "DYNAMICGRID":
      return H.clustering.Provider.Strategy.DYNAMICGRID;
    default:
      return H.clustering.Provider.Strategy.FASTGRID;
  }
}, w = (e) => {
  const {
    data: t,
    dataConverter: r,
    minWeight: n,
    minZoom: a,
    maxZoom: o,
    clusterTheme: m = C,
    eventListenerMap: d,
    clusterStrategy: l,
    eps: g = 100
  } = e, { api: i } = f(), [s, v] = D();
  return L(() => {
    const y = {
      clusteringOptions: {
        strategy: R(l),
        eps: g,
        minWeight: n ? Number.parseInt(n, 10) : 2
      },
      min: a ? Number.parseInt(a, 10) : 0,
      max: o ? Number.parseInt(o, 10) : 22,
      theme: m
      // theme: {
      //     getClusterPresentation: cluster => {
      //         // Use cluster weight to change the icon size
      //         const weight = cluster.getWeight();
      //         // Calculate circle size
      //         const radius = weight; // * 5;
      //         const diameter = radius * 2;
      //         // Replace variables in the icon template
      //         const svgString = clusterSvgTemplate.replace(/\{text\}/g, String(weight));
      //         // .replace(/\{diameter\}/g, String(diameter));
      //         // Create an icon
      //         // Note that we create a different icon depending from the weight of the cluster
      //         const clusterIcon = new H.map.Icon(svgString);
      //         // Create a marker for the cluster
      //         const clusterMarker = new H.map.Marker(cluster.getPosition(), {
      //             icon: clusterIcon,
      //             // Set min/max zoom with values from the cluster, otherwise
      //             // clusters will be shown at all zoom levels
      //             min: cluster.getMinZoom(),
      //             max: cluster.getMaxZoom(),
      //         });
      //         // Bind cluster data to the marker
      //         clusterMarker.setData(cluster);
      //         return clusterMarker;
      //     },
      //     getNoisePresentation: noisePoint => {
      //         // Create a marker for noise points:
      //         const noiseMarker = new H.map.DomMarker(noisePoint.getPosition(), {
      //             // icon: noiseIcon,
      //             icon: reactIcon,
      //             // Use min zoom from a noise point to show it correctly at certain zoom levels
      //             min: noisePoint.getMinZoom(),
      //         });
      //         // Bind noise point data to the marker:
      //         noiseMarker.setData(noisePoint);
      //         return noiseMarker;
      //     },
      // },
    }, u = new H.clustering.Provider(p(t, r), y), c = new H.map.layer.ObjectLayer(u);
    return i.map?.addLayer(c), v(u), () => {
      i.map?.removeLayer(c), c.dispose(), u.dispose();
    };
  }, [n, a, o, i.map]), P(() => {
    s && s.setDataPoints(p(t, r));
  }, [t, r]), E(s, "setTheme", m), I(s, d), null;
};
export {
  w as default
};
//# sourceMappingURL=ClusterLayer.js.map
