import React from "react";
import { Layer, Source } from "react-map-gl";
import { SorterIcon } from "@dynatrace/strato-icons";
import { parseDirectionDataToGeoJSON } from "./functions/parse-direction-data-to-geo-json.js";
import {
  DIRECTION_ICON_OUTPUT_SIZE,
  DIRECTION_ICON_SHRINK_RATIO
} from "../../constants.js";
import { useLoadSymbolIntoMap } from "../../hooks/use-load-symbol-into-map.js";
const ConnectionLayerDirection = (props) => {
  const { geoJsonData, layerId: connectionLayerId, directionIndicator } = props;
  const layerId = `${connectionLayerId}-direction`;
  const sourceId = `source-${layerId}`;
  const { symbolName } = useLoadSymbolIntoMap(
    /* @__PURE__ */ React.createElement(SorterIcon, null),
    layerId,
    DIRECTION_ICON_OUTPUT_SIZE
  );
  const parsedGeoJsonData = parseDirectionDataToGeoJSON({
    geoJsonData,
    directionIndicator
  });
  const iconRotationDegrees = 180;
  return /* @__PURE__ */ React.createElement(
    Source,
    {
      id: sourceId,
      type: "geojson",
      data: parsedGeoJsonData,
      promoteId: "id"
    },
    /* @__PURE__ */ React.createElement(
      Layer,
      {
        id: layerId,
        beforeId: connectionLayerId,
        type: "symbol",
        layout: {
          "symbol-placement": "point",
          "icon-image": symbolName,
          "icon-rotate": ["+", ["get", "__angle"], iconRotationDegrees],
          "icon-rotation-alignment": "map",
          "icon-allow-overlap": true,
          "icon-ignore-placement": true,
          "icon-size": [
            "*",
            ["get", "__lineWidth"],
            DIRECTION_ICON_SHRINK_RATIO
          ]
        },
        paint: {
          "icon-color": [
            "case",
            ["boolean", ["feature-state", "hover"], false],
            ["get", "__lineHoveredColor"],
            ["get", "__lineColor"]
          ],
          "icon-opacity": ["get", "__lineOpacity"]
        }
      }
    )
  );
};
ConnectionLayerDirection["displayName"] = "ConnectionLayerDirection";
export {
  ConnectionLayerDirection
};
//# sourceMappingURL=ConnectionLayerDirection.js.map
