import { isNil, isUndefined } from "lodash-es";
import { useCallback, useEffect } from "react";
import { useMap } from "react-map-gl/maplibre";
import { BASE_LAYER_IDS } from "../constants.js";
const useActiveInteraction = () => {
  const map = useMap().current;
  let featureId;
  let sourceId;
  const handleClick = useCallback(
    ({ point }) => {
      const features = map.queryRenderedFeatures(point);
      const layerId = features?.[0]?.layer?.id;
      const hasHoveredFeatures = !isNil(features) && features.length > 0 && !isUndefined(layerId);
      const isBaseLayer = BASE_LAYER_IDS.includes(layerId);
      if (hasHoveredFeatures && !isBaseLayer) {
        if (!isUndefined(featureId) && !isUndefined(sourceId)) {
          map.setFeatureState(
            { source: sourceId, id: featureId },
            { active: false }
          );
        }
        featureId = features[0].id;
        sourceId = features[0].layer.source;
        const activeState = features[0].state.active;
        map.setFeatureState(
          { source: sourceId, id: featureId },
          { active: !activeState }
        );
      } else {
        if (!isUndefined(featureId) && !isUndefined(sourceId)) {
          map.setFeatureState(
            { source: sourceId, id: featureId },
            { active: false }
          );
        }
      }
    },
    [featureId, sourceId, map]
  );
  useEffect(() => {
    map.on("click", handleClick);
    return () => {
      map.off("click", handleClick);
    };
  }, []);
};
export {
  useActiveInteraction
};
//# sourceMappingURL=use-active-interaction.js.map
