var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/plus/saasAttendance/settings/components/MapField.tsx
var MapField_exports = {};
__export(MapField_exports, {
  default: () => MapField_default
});
module.exports = __toCommonJS(MapField_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_materials = require("@pisell/materials");
var import_utils = require("@pisell/utils");
var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
var DEFAULT_CENTER = { lat: -37.8136, lng: 144.9631 };
var DEFAULT_ZOOM = 14;
var CIRCLE_STROKE_COLOR = "#5d3f9f";
var CIRCLE_FILL_COLOR = "#5d3f9f";
var COORDINATE_NUMBER_PATTERN = /^-?\d+(\.\d+)?$/;
var getCurrentPosition = () => {
  return new Promise((resolve) => {
    if (!navigator.geolocation) {
      resolve(null);
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve({
          lat: position.coords.latitude,
          lng: position.coords.longitude
        });
      },
      () => {
        resolve(null);
      },
      { enableHighAccuracy: true, timeout: 1e4, maximumAge: 0 }
    );
  });
};
var toMultiLangName = (input) => {
  if (!input) return { original: "" };
  if (typeof input === "string") return { original: input };
  if (typeof input === "object") return input;
  return { original: String(input) };
};
var getLocationNameText = (name) => {
  const n = toMultiLangName(name);
  return n.original || n["zh-CN"] || n["zh-HK"] || n.en || n.ja || n.pt || "";
};
var createLocationId = () => {
  const anyCrypto = typeof crypto !== "undefined" ? crypto : void 0;
  if (anyCrypto == null ? void 0 : anyCrypto.randomUUID) return anyCrypto.randomUUID();
  return `${Date.now()}_${Math.random().toString(16).slice(2)}`;
};
var normalizeLocations = (input) => {
  if (!Array.isArray(input)) return [];
  return input.map((item) => {
    var _a, _b;
    if ((item == null ? void 0 : item.address) && ((_a = item.address) == null ? void 0 : _a.lat) != null && ((_b = item.address) == null ? void 0 : _b.lng) != null) {
      const lat2 = typeof item.address.lat === "number" ? item.address.lat : parseFloat(item.address.lat) || 0;
      const lng2 = typeof item.address.lng === "number" ? item.address.lng : parseFloat(item.address.lng) || 0;
      return {
        id: String((item == null ? void 0 : item.id) ?? createLocationId()),
        name: toMultiLangName(item.name),
        radius: item == null ? void 0 : item.radius,
        address: { lat: lat2, lng: lng2 }
      };
    }
    const lat = typeof (item == null ? void 0 : item.lat) === "number" ? item.lat : parseFloat(item == null ? void 0 : item.lat) || 0;
    const lng = typeof (item == null ? void 0 : item.lng) === "number" ? item.lng : parseFloat(item == null ? void 0 : item.lng) || 0;
    return {
      id: String((item == null ? void 0 : item.id) ?? createLocationId()),
      name: toMultiLangName(item == null ? void 0 : item.name),
      radius: item == null ? void 0 : item.radius,
      address: { lat, lng }
    };
  });
};
var LocationFormMap = (0, import_react.forwardRef)(
  (props, ref) => {
    const { value, onChange, defaultRadius = 100 } = props;
    const [form] = import_antd.Form.useForm();
    const modalMapRef = (0, import_react.useRef)(null);
    const [isModalMapReady, setIsModalMapReady] = (0, import_react.useState)(false);
    const context = (0, import_useEngineContext.default)();
    const GoogleMapComponent = (0, import_react.useMemo)(() => {
      var _a, _b, _c;
      const app = (_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b);
      if (!app) return null;
      return app.getPlugin("google-map") || null;
    }, [context]);
    const lat = import_antd.Form.useWatch("latitude", form);
    const lng = import_antd.Form.useWatch("longitude", form);
    const validRangeMeters = import_antd.Form.useWatch("validRangeMeters", form) ?? defaultRadius;
    const [debouncedValidRangeMeters, setDebouncedValidRangeMeters] = (0, import_react.useState)(validRangeMeters);
    (0, import_react.useEffect)(() => {
      setDebouncedValidRangeMeters(validRangeMeters);
    }, []);
    (0, import_react.useEffect)(() => {
      const timer = setTimeout(() => {
        setDebouncedValidRangeMeters(validRangeMeters);
      }, 200);
      return () => clearTimeout(timer);
    }, [validRangeMeters]);
    (0, import_react.useEffect)(() => {
      if (value) {
        form.setFieldsValue(value);
        if (value.latitude && value.longitude && modalMapRef.current) {
          const center = {
            lat: parseFloat(value.latitude),
            lng: parseFloat(value.longitude)
          };
          modalMapRef.current.setCamera({
            coordinate: center,
            zoom: DEFAULT_ZOOM,
            animate: true
          });
        }
      } else {
        form.resetFields();
        form.setFieldsValue({ validRangeMeters: defaultRadius });
      }
    }, [value, form, defaultRadius]);
    (0, import_react.useEffect)(() => {
      if (!isModalMapReady || !modalMapRef.current) return;
      const latNum = parseFloat(lat);
      const lngNum = parseFloat(lng);
      if (isNaN(latNum) || isNaN(lngNum)) return;
      modalMapRef.current.setCamera({
        coordinate: { lat: latNum, lng: lngNum },
        zoom: DEFAULT_ZOOM,
        animate: true
      });
    }, [isModalMapReady, lat, lng]);
    (0, import_react.useImperativeHandle)(ref, () => ({
      validate: () => form.validateFields()
    }));
    const handleMapClick = (0, import_react.useCallback)(
      (coordinate) => {
        const newValues = {
          latitude: coordinate.lat.toFixed(6),
          longitude: coordinate.lng.toFixed(6)
        };
        form.setFieldsValue(newValues);
        const currentValues = form.getFieldsValue();
        onChange == null ? void 0 : onChange({ ...currentValues, ...newValues });
      },
      [form, onChange]
    );
    const handleValuesChange = (changedValues, allValues) => {
      onChange == null ? void 0 : onChange(allValues);
    };
    const mapVisualization = (0, import_react.useMemo)(() => {
      const latNum = parseFloat(lat);
      const lngNum = parseFloat(lng);
      if (isNaN(latNum) || isNaN(lngNum)) {
        return { markers: [], circles: [], center: DEFAULT_CENTER };
      }
      const coordinate = { lat: latNum, lng: lngNum };
      const markers = [
        {
          id: "current-location",
          coordinate,
          draggable: false
        }
      ];
      const circles = [
        {
          id: "current-range",
          center: coordinate,
          radius: debouncedValidRangeMeters,
          strokeColor: CIRCLE_STROKE_COLOR,
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: CIRCLE_FILL_COLOR,
          fillOpacity: 0.2
        }
      ];
      return { markers, circles, center: coordinate };
    }, [lat, lng, debouncedValidRangeMeters]);
    return /* @__PURE__ */ import_react.default.createElement(
      import_antd.Form,
      {
        form,
        layout: "vertical",
        className: "saas-attendance-group-settings__modal-form",
        onValuesChange: handleValuesChange,
        initialValues: { validRangeMeters: defaultRadius }
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_antd.Form.Item,
        {
          label: import_utils.locales.getText(
            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.label"
          ),
          name: "name",
          required: true,
          rules: [
            {
              validator: async (_rule, value2) => {
                if (!value2) {
                  throw new Error(
                    import_utils.locales.getText(
                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.validation"
                    )
                  );
                }
                if (typeof value2 === "string") {
                  if (value2.trim()) return Promise.resolve();
                } else if (typeof value2 === "object") {
                  const texts = Object.values(value2).filter(
                    (item) => typeof item === "string" && item.trim()
                  );
                  if (texts.length > 0) return Promise.resolve();
                }
                throw new Error(
                  import_utils.locales.getText(
                    "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.validation"
                  )
                );
              }
            }
          ]
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_materials.BaseTranslation,
          {
            placeholder: import_utils.locales.getText(
              "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.placeholder"
            )
          }
        )
      ),
      /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__modal-grid" }, /* @__PURE__ */ import_react.default.createElement(
        import_antd.Form.Item,
        {
          label: import_utils.locales.getText(
            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.label"
          ),
          name: "latitude",
          required: true,
          rules: [
            { required: true },
            {
              validator: async (_rule, value2) => {
                const text = String(value2 ?? "").trim();
                if (!text) return Promise.resolve();
                if (!COORDINATE_NUMBER_PATTERN.test(text)) {
                  throw new Error(
                    import_utils.locales.getText(
                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.validation"
                    )
                  );
                }
                const latValue = parseFloat(text);
                if (latValue < -90 || latValue > 90) {
                  throw new Error(
                    import_utils.locales.getText(
                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.validation"
                    )
                  );
                }
                return Promise.resolve();
              }
            }
          ]
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Input,
          {
            placeholder: import_utils.locales.getText(
              "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.placeholder"
            )
          }
        )
      ), /* @__PURE__ */ import_react.default.createElement(
        import_antd.Form.Item,
        {
          label: import_utils.locales.getText(
            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.label"
          ),
          name: "longitude",
          required: true,
          rules: [
            { required: true },
            {
              validator: async (_rule, value2) => {
                const text = String(value2 ?? "").trim();
                if (!text) return Promise.resolve();
                if (!COORDINATE_NUMBER_PATTERN.test(text)) {
                  throw new Error(
                    import_utils.locales.getText(
                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.validation"
                    )
                  );
                }
                const lngValue = parseFloat(text);
                if (lngValue < -180 || lngValue > 180) {
                  throw new Error(
                    import_utils.locales.getText(
                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.validation"
                    )
                  );
                }
                return Promise.resolve();
              }
            }
          ]
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Input,
          {
            placeholder: import_utils.locales.getText(
              "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.placeholder"
            )
          }
        )
      )),
      /* @__PURE__ */ import_react.default.createElement(
        import_antd.Form.Item,
        {
          label: import_utils.locales.getText(
            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.valid-range.label"
          ),
          required: true
        },
        /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__modal-slider-row" }, /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "validRangeMeters",
            noStyle: true,
            rules: [{ required: true }]
          },
          /* @__PURE__ */ import_react.default.createElement(import_antd.Slider, { min: 0, max: 1e3 })
        ), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__slider-value" }, import_utils.locales.getText(
          "pisell2.attendance.group-settings.clock-in-method.meters"
        )(validRangeMeters)))
      ),
      /* @__PURE__ */ import_react.default.createElement(
        import_antd.Alert,
        {
          message: import_utils.locales.getText(
            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.tip.google-maps"
          ),
          type: "info",
          showIcon: true
        }
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "saas-attendance-group-settings__map-placeholder saas-attendance-map-field__modal-map",
          style: { marginTop: "10px" }
        },
        GoogleMapComponent && /* @__PURE__ */ import_react.default.createElement(
          GoogleMapComponent,
          {
            ref: modalMapRef,
            config: {
              center: mapVisualization.center,
              zoom: DEFAULT_ZOOM
            },
            markers: mapVisualization.markers,
            circles: mapVisualization.circles,
            onReady: () => setIsModalMapReady(true),
            onMapClick: handleMapClick,
            onError: (err) => console.error("Map Error:", err)
          }
        )
      )
    );
  }
);
var MapField = (0, import_react.forwardRef)((props, ref) => {
  const { value = [], onChange, defaultRadius = 100, className } = props;
  const locations = (0, import_react.useMemo)(() => normalizeLocations(value), [value]);
  const [addLocationOpen, setAddLocationOpen] = (0, import_react.useState)(false);
  const [editingLocationValue, setEditingLocationValue] = (0, import_react.useState)(null);
  const [editingLocationId, setEditingLocationId] = (0, import_react.useState)(
    null
  );
  const locationFormMapRef = (0, import_react.useRef)(null);
  const mapRef = (0, import_react.useRef)(null);
  const [isMapReady, setIsMapReady] = (0, import_react.useState)(false);
  const [activeLocationId, setActiveLocationId] = (0, import_react.useState)(null);
  const context = (0, import_useEngineContext.default)();
  (0, import_react.useEffect)(() => {
    if (!onChange || !Array.isArray(value) || value.length === 0) return;
    const needsNormalize = value.some(
      (item) => !(item == null ? void 0 : item.address) || (item == null ? void 0 : item.lat) != null || (item == null ? void 0 : item.lng) != null || typeof (item == null ? void 0 : item.name) === "string" || (item == null ? void 0 : item.address) && typeof item.address === "object" && Object.keys(item.address).some((k) => k !== "lat" && k !== "lng")
    );
    if (!needsNormalize) return;
    onChange(normalizeLocations(value));
  }, [onChange, value]);
  const GoogleMapComponent = (0, import_react.useMemo)(() => {
    var _a, _b, _c;
    const app = (_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b);
    if (!app) return null;
    return app.getPlugin("google-map") || null;
  }, [context]);
  (0, import_react.useEffect)(() => {
    if (locations.length === 0) {
      setActiveLocationId(null);
      return;
    }
    if (activeLocationId && locations.some((loc) => loc.id === activeLocationId)) {
      return;
    }
    setActiveLocationId(locations[0].id);
  }, [locations, activeLocationId]);
  const mapCenter = (0, import_react.useMemo)(() => {
    if (locations.length === 0) return DEFAULT_CENTER;
    const activeLocation = activeLocationId ? locations.find((loc) => loc.id === activeLocationId) : null;
    if (activeLocation) {
      return {
        lat: activeLocation.address.lat,
        lng: activeLocation.address.lng
      };
    }
    return { lat: locations[0].address.lat, lng: locations[0].address.lng };
  }, [locations, activeLocationId]);
  const markers = (0, import_react.useMemo)(() => {
    return locations.map((loc) => ({
      id: loc.id,
      coordinate: { lat: loc.address.lat, lng: loc.address.lng },
      title: getLocationNameText(loc.name),
      draggable: false
    }));
  }, [locations]);
  const circles = (0, import_react.useMemo)(() => {
    return locations.map((loc) => ({
      id: `circle-${loc.id}`,
      center: { lat: loc.address.lat, lng: loc.address.lng },
      radius: loc.radius || defaultRadius,
      strokeColor: CIRCLE_STROKE_COLOR,
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: CIRCLE_FILL_COLOR,
      fillOpacity: 0.2
    }));
  }, [locations, defaultRadius]);
  (0, import_react.useImperativeHandle)(
    ref,
    () => ({
      onAddLocation: async () => {
        const baseFormValue = {
          name: { original: "", en: "", "zh-CN": "", "zh-HK": "", "ja": "", "pt": "" },
          latitude: "",
          longitude: "",
          validRangeMeters: defaultRadius
        };
        setAddLocationOpen(true);
        setEditingLocationId(null);
        setEditingLocationValue(baseFormValue);
        const currentPosition = await getCurrentPosition();
        if (currentPosition) {
          setEditingLocationValue({
            ...baseFormValue,
            latitude: currentPosition.lat.toFixed(6),
            longitude: currentPosition.lng.toFixed(6)
          });
        }
      }
    }),
    [defaultRadius]
  );
  const handleSubmitLocation = async () => {
    if (!locationFormMapRef.current) return;
    try {
      const values = await locationFormMapRef.current.validate();
      const nextLocation = {
        id: editingLocationId ?? createLocationId(),
        name: toMultiLangName(values.name),
        radius: values.validRangeMeters,
        address: {
          lat: parseFloat(values.latitude) || 0,
          lng: parseFloat(values.longitude) || 0
        }
      };
      if (editingLocationId) {
        const nextLocations = locations.map(
          (loc) => loc.id === editingLocationId ? nextLocation : loc
        );
        onChange == null ? void 0 : onChange(nextLocations);
        setActiveLocationId(editingLocationId);
      } else {
        const nextLocations = [nextLocation, ...locations];
        onChange == null ? void 0 : onChange(nextLocations);
        setActiveLocationId(nextLocation.id);
      }
      setAddLocationOpen(false);
      setEditingLocationValue(null);
      setEditingLocationId(null);
    } catch (error) {
      console.error("Validation failed:", error);
    }
  };
  const handleEditLocation = (0, import_react.useCallback)(
    (location) => {
      setAddLocationOpen(true);
      setEditingLocationId(location.id);
      setEditingLocationValue({
        name: toMultiLangName(location.name),
        latitude: String(location.address.lat ?? ""),
        longitude: String(location.address.lng ?? ""),
        validRangeMeters: location.radius ?? defaultRadius
      });
    },
    [defaultRadius]
  );
  const handleRemoveLocation = (locationId) => {
    const nextLocations = locations.filter((loc) => loc.id !== locationId);
    onChange == null ? void 0 : onChange(nextLocations);
  };
  const handleLocationItemClick = (0, import_react.useCallback)(
    (location) => {
      var _a;
      setActiveLocationId(location.id);
      (_a = mapRef.current) == null ? void 0 : _a.setCamera({
        coordinate: { lat: location.address.lat, lng: location.address.lng },
        zoom: DEFAULT_ZOOM,
        animate: true
      });
    },
    []
  );
  const handleMapReady = (0, import_react.useCallback)(() => {
    setIsMapReady(true);
  }, []);
  const handleMarkerClick = (0, import_react.useCallback)(
    (markerId, marker) => {
      console.log("Marker clicked:", markerId, marker);
    },
    []
  );
  (0, import_react.useEffect)(() => {
    if (!isMapReady || !mapRef.current || locations.length === 0) return;
    const targetLocation = activeLocationId ? locations.find((loc) => loc.id === activeLocationId) : locations[0];
    if (targetLocation) {
      mapRef.current.setCamera({
        coordinate: {
          lat: targetLocation.address.lat,
          lng: targetLocation.address.lng
        },
        zoom: DEFAULT_ZOOM,
        animate: true
      });
    }
  }, [isMapReady, activeLocationId, locations]);
  const renderEmptyState = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-icon" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-marker-pin-01", size: 48 })), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-title" }, import_utils.locales.getText(
    "pisell2.attendance.group-settings.clock-in-method.approved-locations.empty.title"
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-desc" }, import_utils.locales.getText(
    "pisell2.attendance.group-settings.clock-in-method.approved-locations.empty.desc"
  )));
  const renderLocationsList = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__map-container" }, /* @__PURE__ */ import_react.default.createElement(
    GoogleMapComponent,
    {
      ref: mapRef,
      config: {
        center: mapCenter,
        zoom: DEFAULT_ZOOM
      },
      markers,
      circles,
      onReady: handleMapReady,
      onMarkerClick: handleMarkerClick,
      onError: (err) => console.error("Map Error:", err)
    }
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__locations" }, locations.map((location) => /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      key: location.id,
      className: `saas-attendance-group-settings__location-item${activeLocationId === location.id ? " saas-attendance-group-settings__location-item--active" : ""}`,
      onClick: () => handleLocationItemClick(location),
      style: { cursor: "pointer" }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__location-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__location-name" }, getLocationNameText(location.name)), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__location-actions" }, /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        type: "text",
        size: "small",
        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-edit-05", size: 16 }),
        className: "saas-attendance-map-field__edit-btn",
        onClick: (e) => {
          e.stopPropagation();
          handleEditLocation(location);
        }
      }
    ), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        type: "text",
        size: "small",
        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-trash-01", size: 16 }),
        className: "saas-attendance-map-field__delete-btn",
        onClick: (e) => {
          e.stopPropagation();
          handleRemoveLocation(location.id);
        }
      }
    ))),
    /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__location-meta" }, import_utils.locales.getText(
      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.valid-range.label"
    ), ": ", /* @__PURE__ */ import_react.default.createElement("span", null, location.radius || defaultRadius))
  ))));
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: `saas-attendance-group-settings__locations-box ${className || ""}`
    },
    locations.length === 0 ? renderEmptyState() : renderLocationsList()
  ), /* @__PURE__ */ import_react.default.createElement(
    import_materials.PisellModal,
    {
      open: addLocationOpen,
      title: import_utils.locales.getText(
        editingLocationId ? "pisell2.attendance.group-settings.clock-in-method.edit-location-modal.title" : "pisell2.attendance.group-settings.clock-in-method.add-location-modal.title"
      ),
      destroyOnHidden: true,
      onCancel: () => {
        setAddLocationOpen(false);
        setEditingLocationValue(null);
        setEditingLocationId(null);
      },
      okText: import_utils.locales.getText(
        editingLocationId ? "pisell2.attendance.group-settings.actions.edit-location-confirm" : "pisell2.attendance.group-settings.actions.add-location-confirm"
      ),
      cancelText: import_utils.locales.getText(
        "pisell2.attendance.group-settings.actions.cancel"
      ),
      onOk: handleSubmitLocation
    },
    /* @__PURE__ */ import_react.default.createElement(
      LocationFormMap,
      {
        ref: locationFormMapRef,
        value: editingLocationValue,
        onChange: setEditingLocationValue,
        defaultRadius
      }
    )
  ));
});
MapField.displayName = "MapField";
var MapField_default = MapField;
