import {
  CustomLayer
} from "./chunk-EEOMRBEG.js";
import {
  useAsyncEffect_default,
  useMemoObjectDeep_default
} from "./chunk-NMUGRJT3.js";
import {
  StateContextProvider_default,
  createStateContext_default,
  useMemoObjectShallow_default
} from "./chunk-W3FLVN5D.js";
import "./chunk-JSBRDJBE.js";

// src/js-tools/react-mapbox/MapboxCustomLayer.tsx
import {
  useContext as useContext2,
  useEffect,
  useId,
  useMemo
} from "react";
import { MercatorCoordinate } from "mapbox-gl";
import { AmbientLight, PointLight } from "three";

// src/js-tools/react-mapbox/contexts.ts
var MapboxMapContext = createStateContext_default();
var MapboxCustomLayerContext = createStateContext_default();

// src/js-tools/react-mapbox/useMap.ts
import { useContext } from "react";
function useMap() {
  const [{ map }] = useContext(MapboxMapContext);
  return map;
}
var useMap_default = useMap;

// src/js-tools/react-mapbox/MapboxCustomLayer.tsx
import { Fragment, jsx } from "react/jsx-runtime";
var Sun = class extends PointLight {
  constructor(rotationRadius, color, intensity) {
    super(color, intensity);
    this.rotationRadius = rotationRadius;
    this.strength = intensity;
  }
  update(time) {
    let p = time / 1e4;
    p = p - Math.floor(p);
    const angle = p * Math.PI * 2;
    if (angle > Math.PI) {
      this.visible = false;
    } else {
      this.visible = true;
      const x = Math.cos(angle) * this.rotationRadius;
      const y = Math.sin(angle) * this.rotationRadius;
      this.position.set(x, y, 0);
      this.intensity = this.strength * (1 - Math.abs(1 - angle / Math.PI * 2));
    }
  }
};
function MapboxCustomLayerInternal({
  children,
  anchor,
  renderingMode = "3d"
}) {
  const [, setMapboxCustomLayerCtx] = useContext2(MapboxCustomLayerContext);
  const map = useMap_default();
  const id = useId();
  useEffect(() => {
    if (map) {
      const customLayer = new CustomLayer({ id, anchor, renderingMode });
      const mercatorCoord = MercatorCoordinate.fromLngLat(
        customLayer.anchor,
        1e6
      );
      const sun = new Sun(mercatorCoord.z ?? 0, 16777215, 0.05);
      const ambient = new AmbientLight(16777215, 2);
      const cameraLight = new PointLight(16777215, 0.025);
      customLayer.add(sun);
      customLayer.add(ambient);
      customLayer.add(cameraLight);
      setMapboxCustomLayerCtx({
        customLayer
      });
      sun.update(2e3);
      map.addLayer(customLayer);
      return () => {
        map.removeLayer(customLayer.id);
        setMapboxCustomLayerCtx({
          customLayer: null
        });
        customLayer.remove(sun);
        customLayer.remove(ambient);
        customLayer.remove(cameraLight);
      };
    }
  }, [anchor, renderingMode, id, map, setMapboxCustomLayerCtx]);
  return useMemo(() => /* @__PURE__ */ jsx(Fragment, { children }), [children]);
}
function MapboxCustomLayer(props) {
  props = useMemoObjectShallow_default(props);
  return useMemo(
    () => /* @__PURE__ */ jsx(
      StateContextProvider_default,
      {
        contexts: [MapboxCustomLayerContext],
        values: [{ customLayer: null }],
        children: /* @__PURE__ */ jsx(MapboxCustomLayerInternal, { ...props })
      }
    ),
    [props]
  );
}
var MapboxCustomLayer_default = MapboxCustomLayer;

// src/js-tools/react-mapbox/MapboxMap.tsx
import { Map } from "mapbox-gl";
import { useContext as useContext3, useMemo as useMemo2, useRef } from "react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function _MapboxMap({
  children,
  options
}) {
  const divRef = useRef(null);
  const [, setMapboxMapCtx] = useContext3(MapboxMapContext);
  options = useMemoObjectDeep_default(options);
  useAsyncEffect_default(
    () => async () => {
      const elem = divRef.current;
      if (elem) {
        const map = new Map({
          container: elem,
          ...options
        });
        await new Promise((resolve) => {
          map.once("style.load", () => {
            resolve();
          });
        });
        setMapboxMapCtx({
          map
        });
        return async () => {
          setMapboxMapCtx({
            map: null
          });
          await new Promise((resolve) => {
            setTimeout(() => {
              map.remove();
              resolve();
            }, 300);
          });
        };
      }
    },
    [options, setMapboxMapCtx]
  );
  return useMemo2(
    () => /* @__PURE__ */ jsxs(
      "div",
      {
        style: {
          width: "100%",
          height: "100%"
        },
        children: [
          /* @__PURE__ */ jsx2(
            "div",
            {
              ref: divRef,
              style: {
                position: "relative",
                width: "100%",
                height: "100%"
              }
            }
          ),
          children
        ]
      }
    ),
    [children]
  );
}
function MapboxMap(props) {
  props = useMemoObjectShallow_default(props);
  return useMemo2(
    () => /* @__PURE__ */ jsx2(
      StateContextProvider_default,
      {
        contexts: [MapboxMapContext],
        values: [
          {
            map: null
          }
        ],
        children: /* @__PURE__ */ jsx2(_MapboxMap, { ...props })
      }
    ),
    [props]
  );
}
var MapboxMap_default = MapboxMap;

// src/js-tools/react-mapbox/useCustomLayer.ts
import { useContext as useContext4 } from "react";
function useCustomLayer() {
  const [{ customLayer }] = useContext4(MapboxCustomLayerContext);
  return customLayer;
}
var useCustomLayer_default = useCustomLayer;
export {
  MapboxCustomLayer_default as MapboxCustomLayer,
  MapboxMap_default as MapboxMap,
  useCustomLayer_default as useCustomLayer,
  useMap_default as useMap
};
