import { Component, useField, SugaredField } from "@contember/binding";
import { FieldContainer } from "@contember/ui";
import * as Leaflet from "leaflet";
import { useCallback, useState, useEffect } from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
var _jsxFileName = "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/LocationField/LocationField.tsx";
const markerIcon = Leaflet.divIcon({
  className: "locationField-marker",
  iconSize: [24, 24],
  iconAnchor: [12, 23]
});
const defaultZoom = 5;
const LocationField = Component(({
  latitudeField,
  longitudeField,
  mapCenter,
  zoom = defaultZoom,
  tileLayerProps,
  mapProps,
  markerProps,
  ...fieldContainerProps
}) => {
  const latitude = useField(latitudeField);
  const longitude = useField(longitudeField);
  const moveMarker = useCallback((e) => {
    const latLng = e.latlng;
    if (latLng === void 0) {
      return;
    }
    latitude.updateValue(latLng.lat);
    longitude.updateValue(latLng.lng);
  }, [latitude, longitude]);
  const [resolvedCenter] = useState(() => {
    if (mapCenter !== void 0) {
      return mapCenter;
    }
    if (latitude.value !== null && longitude.value !== null) {
      return [latitude.value, longitude.value];
    }
    return [50.102223, 9.254419];
  });
  const [map, setMap] = useState(null);
  useEffect(() => {
    map?.on("click", moveMarker);
    return () => {
      map?.off("click", moveMarker);
    };
  }, [map, moveMarker]);
  return /* @__PURE__ */ jsxDEV(FieldContainer, {
    ...fieldContainerProps,
    children: /* @__PURE__ */ jsxDEV("div", {
      className: "locationField-map-container",
      children: /* @__PURE__ */ jsxDEV(MapContainer, {
        ref: setMap,
        center: resolvedCenter,
        zoom,
        className: "locationField-map-canvas",
        ...mapProps ?? {},
        children: [/* @__PURE__ */ jsxDEV(TileLayer, {
          url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          attribution: '\xA9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          ...tileLayerProps ?? {}
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 82,
          columnNumber: 7
        }, void 0), latitude.value !== null && longitude.value !== null && /* @__PURE__ */ jsxDEV(Marker, {
          icon: markerIcon,
          ...markerProps ?? {},
          position: [latitude.value, longitude.value],
          draggable: true,
          eventHandlers: {
            move: moveMarker
          }
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 88,
          columnNumber: 8
        }, void 0)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 6
      }, void 0)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 5
    }, void 0)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 73,
    columnNumber: 4
  }, void 0);
}, (props) => /* @__PURE__ */ jsxDEV(Fragment, {
  children: [/* @__PURE__ */ jsxDEV(SugaredField, {
    field: props.latitudeField
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 105,
    columnNumber: 4
  }, void 0), /* @__PURE__ */ jsxDEV(SugaredField, {
    field: props.longitudeField
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 106,
    columnNumber: 4
  }, void 0)]
}, void 0, true), "LocationField");
export {
  LocationField
};
//# sourceMappingURL=LocationField.js.map
