import React from "react";
import { Layer, Source } from "react-map-gl/maplibre";
import { ConnectionLayerDirection } from "./ConnectionLayerDirection.js";
import { ConnectionLayerTooltip } from "./ConnectionLayerTooltip.js";
import { parseConnectionDataToGeoJSON } from "./functions/parse-connection-data-to-geo-json.js";
import { useConnectionLayerMouseMove } from "./hooks/use-connection-layer-mouse-move.js";
import {
  DEFAULT_LINE_CAP,
  DEFAULT_LINE_COLOR,
  DEFAULT_LINE_DASH_ARRAY,
  DEFAULT_LINE_JOIN,
  DEFAULT_LINE_THICKNESS
} from "../../constants.js";
import { isConnectionTooltipTemplate } from "../../functions/tooltip-type-guards.js";
import { useTooltipTemplate } from "../../hooks/use-tooltip-template.js";
import { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from "../../slots/ConnectionLayerTooltip.js";
const ConnectionLayer = (props) => {
  const {
    data,
    layerId,
    children,
    color = DEFAULT_LINE_COLOR,
    curve,
    directionIndicator,
    line,
    thickness = DEFAULT_LINE_THICKNESS
  } = props;
  const sourceId = `source-${layerId}`;
  const geoJsonData = parseConnectionDataToGeoJSON(
    data,
    thickness,
    color,
    curve
  );
  const tooltipTemplate = useTooltipTemplate(
    children,
    ConnectionLayerTooltipSlot
  );
  const { layerIds } = useConnectionLayerMouseMove(geoJsonData.length, layerId);
  return geoJsonData.map((featureCollection, index) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
    Source,
    {
      id: `${sourceId}-${index}`,
      type: "geojson",
      data: featureCollection,
      promoteId: "id"
    },
    /* @__PURE__ */ React.createElement(
      Layer,
      {
        type: "line",
        id: layerIds[index],
        layout: {
          "line-cap": DEFAULT_LINE_CAP,
          "line-join": DEFAULT_LINE_JOIN
        },
        paint: {
          "line-color": [
            "case",
            ["boolean", ["feature-state", "hover"], false],
            ["get", "__lineHoveredColor"],
            ["get", "__lineColor"]
          ],
          "line-width": ["get", "__lineWidth"],
          ...line && line === "dashed" ? { "line-dasharray": DEFAULT_LINE_DASH_ARRAY } : null
        }
      }
    )
  ), /* @__PURE__ */ React.createElement(
    ConnectionLayerTooltip,
    {
      layerId: layerIds[index],
      tooltipTemplate: isConnectionTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
    }
  ), directionIndicator && /* @__PURE__ */ React.createElement(
    ConnectionLayerDirection,
    {
      geoJsonData: featureCollection,
      layerId: layerIds[index],
      directionIndicator
    }
  )));
};
ConnectionLayer["displayName"] = "ConnectionLayer";
export {
  ConnectionLayer
};
//# sourceMappingURL=ConnectionLayer.js.map
