import React from "react";
import { Layer, Source } from "react-map-gl/maplibre";
import { BackgroundLayer } from "./BackgroundLayer.js";
import { DotLayerTooltip } from "./DotLayerTooltip.js";
import { parseDotDataToGeoJSON } from "./functions/parse-dot-data-to-geo-json.js";
import {
  DEFAULT_ICON_COLOR,
  DEFAULT_ICON_SIZE_RATIO,
  DEFAULT_SHAPE_COLOR,
  DEFAULT_SYMBOL_SIZE,
  LEGEND_DIM_OPACITY,
  SHAPE_OPACITY
} from "../../constants.js";
import { isDotTooltipTemplate } from "../../functions/tooltip-type-guards.js";
import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strategy.js";
import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
import { useLegendInteractionVisibility } from "../../hooks/use-legend-interaction-visibility.js";
import { useLoadSymbolIntoMap } from "../../hooks/use-load-symbol-into-map.js";
import { useResolveColor } from "../../hooks/use-resolve-color.js";
import { useTooltipTemplate } from "../../hooks/use-tooltip-template.js";
import { DotLayerTooltip as DotLayerTooltipSlot } from "../../slots/DotLayerTooltip.js";
const DotLayer = (props) => {
  const {
    data,
    layerId,
    bearing = 0,
    children,
    shape = "pin",
    background = false,
    shapeSize = DEFAULT_SYMBOL_SIZE
  } = props;
  const { symbolName, symbolType } = useLoadSymbolIntoMap(
    shape,
    layerId,
    shapeSize
  );
  const defaultSymbolColor = symbolType === "shape" ? DEFAULT_SHAPE_COLOR : DEFAULT_ICON_COLOR;
  const colorParser = useLayerColoringStrategy();
  const shapeColor = useResolveColor(defaultSymbolColor, props, colorParser);
  const tooltipTemplate = useTooltipTemplate(children, DotLayerTooltipSlot);
  const sourceId = `source-${layerId}`;
  useLegendInteractionHighlighting(props, sourceId);
  useLegendInteractionVisibility(props, layerId);
  const dataGeoJson = parseDotDataToGeoJSON(data, shapeColor, bearing);
  const iconAnchor = shape === "pin" ? "bottom" : "center";
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ React.createElement(
    Layer,
    {
      type: "symbol",
      id: layerId,
      layout: {
        "icon-image": symbolName,
        "icon-size": DEFAULT_ICON_SIZE_RATIO,
        "icon-rotate": ["get", "__bearing"],
        // https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-ignore-placement
        "icon-ignore-placement": true,
        "icon-anchor": iconAnchor
      },
      paint: {
        "icon-color": ["get", "__color"],
        "icon-opacity": [
          "case",
          ["boolean", ["feature-state", "legendHover"], true],
          SHAPE_OPACITY,
          LEGEND_DIM_OPACITY
        ]
      }
    }
  ), /* @__PURE__ */ React.createElement(
    BackgroundLayer,
    {
      background,
      beforeId: layerId,
      source: sourceId,
      radius: shapeSize / 2,
      iconAnchor
    }
  )), /* @__PURE__ */ React.createElement(
    DotLayerTooltip,
    {
      layerId,
      tooltipTemplate: isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
    }
  ));
};
DotLayer["displayName"] = "DotLayer";
export {
  DotLayer
};
//# sourceMappingURL=DotLayer.js.map
