const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_asyncToGenerator = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
const require_useEngineContext = require("../../../../hooks/useEngineContext.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
//#region src/plus/saasAttendance/settings/components/MapField.tsx
const DEFAULT_CENTER = {
	lat: -37.8136,
	lng: 144.9631
};
const DEFAULT_ZOOM = 14;
const CIRCLE_STROKE_COLOR = "#5d3f9f";
const CIRCLE_FILL_COLOR = "#5d3f9f";
const COORDINATE_NUMBER_PATTERN = /^-?\d+(\.\d+)?$/;
const 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
		});
	});
};
const toMultiLangName = (input) => {
	if (!input) return { original: "" };
	if (typeof input === "string") return { original: input };
	if (typeof input === "object") return input;
	return { original: String(input) };
};
const getLocationNameText = (name) => {
	const n = toMultiLangName(name);
	return n.original || n["zh-CN"] || n["zh-HK"] || n.en || n.ja || n.pt || "";
};
const createLocationId = () => {
	const anyCrypto = typeof crypto !== "undefined" ? crypto : void 0;
	if (anyCrypto === null || anyCrypto === void 0 ? void 0 : anyCrypto.randomUUID) return anyCrypto.randomUUID();
	return `${Date.now()}_${Math.random().toString(16).slice(2)}`;
};
const normalizeLocations = (input) => {
	if (!Array.isArray(input)) return [];
	return input.map((item) => {
		var _item$address, _item$address2, _item$id2;
		if ((item === null || item === void 0 ? void 0 : item.address) && ((_item$address = item.address) === null || _item$address === void 0 ? void 0 : _item$address.lat) != null && ((_item$address2 = item.address) === null || _item$address2 === void 0 ? void 0 : _item$address2.lng) != null) {
			var _item$id;
			const lat = typeof item.address.lat === "number" ? item.address.lat : parseFloat(item.address.lat) || 0;
			const lng = typeof item.address.lng === "number" ? item.address.lng : parseFloat(item.address.lng) || 0;
			return {
				id: String((_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : createLocationId()),
				name: toMultiLangName(item.name),
				radius: item === null || item === void 0 ? void 0 : item.radius,
				address: {
					lat,
					lng
				}
			};
		}
		const lat = typeof (item === null || item === void 0 ? void 0 : item.lat) === "number" ? item.lat : parseFloat(item === null || item === void 0 ? void 0 : item.lat) || 0;
		const lng = typeof (item === null || item === void 0 ? void 0 : item.lng) === "number" ? item.lng : parseFloat(item === null || item === void 0 ? void 0 : item.lng) || 0;
		return {
			id: String((_item$id2 = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id2 !== void 0 ? _item$id2 : createLocationId()),
			name: toMultiLangName(item === null || item === void 0 ? void 0 : item.name),
			radius: item === null || item === void 0 ? void 0 : item.radius,
			address: {
				lat,
				lng
			}
		};
	});
};
const LocationFormMap = (0, react.forwardRef)((props, ref) => {
	var _Form$useWatch;
	const { value, onChange, defaultRadius = 100 } = props;
	const [form] = antd.Form.useForm();
	const modalMapRef = (0, react.useRef)(null);
	const [isModalMapReady, setIsModalMapReady] = (0, react.useState)(false);
	const context = require_useEngineContext.default();
	const GoogleMapComponent = (0, react.useMemo)(() => {
		var _context$appHelper, _context$appHelper$ge;
		const app = context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper$ge = _context$appHelper.getApp) === null || _context$appHelper$ge === void 0 ? void 0 : _context$appHelper$ge.call(_context$appHelper);
		if (!app) return null;
		return app.getPlugin("google-map") || null;
	}, [context]);
	const lat = antd.Form.useWatch("latitude", form);
	const lng = antd.Form.useWatch("longitude", form);
	const validRangeMeters = (_Form$useWatch = antd.Form.useWatch("validRangeMeters", form)) !== null && _Form$useWatch !== void 0 ? _Form$useWatch : defaultRadius;
	const [debouncedValidRangeMeters, setDebouncedValidRangeMeters] = (0, react.useState)(validRangeMeters);
	(0, react.useEffect)(() => {
		setDebouncedValidRangeMeters(validRangeMeters);
	}, []);
	(0, react.useEffect)(() => {
		const timer = setTimeout(() => {
			setDebouncedValidRangeMeters(validRangeMeters);
		}, 200);
		return () => clearTimeout(timer);
	}, [validRangeMeters]);
	(0, 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, 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, react.useImperativeHandle)(ref, () => ({ validate: () => form.validateFields() }));
	const handleMapClick = (0, react.useCallback)((coordinate) => {
		const newValues = {
			latitude: coordinate.lat.toFixed(6),
			longitude: coordinate.lng.toFixed(6)
		};
		form.setFieldsValue(newValues);
		const currentValues = form.getFieldsValue();
		onChange === null || onChange === void 0 || onChange(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, currentValues), newValues));
	}, [form, onChange]);
	const handleValuesChange = (changedValues, allValues) => {
		onChange === null || onChange === void 0 || onChange(allValues);
	};
	const mapVisualization = (0, 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
		};
		return {
			markers: [{
				id: "current-location",
				coordinate,
				draggable: false
			}],
			circles: [{
				id: "current-range",
				center: coordinate,
				radius: debouncedValidRangeMeters,
				strokeColor: CIRCLE_STROKE_COLOR,
				strokeOpacity: .8,
				strokeWeight: 2,
				fillColor: CIRCLE_FILL_COLOR,
				fillOpacity: .2
			}],
			center: coordinate
		};
	}, [
		lat,
		lng,
		debouncedValidRangeMeters
	]);
	return /* @__PURE__ */ react.default.createElement(antd.Form, {
		form,
		layout: "vertical",
		className: "saas-attendance-group-settings__modal-form",
		onValuesChange: handleValuesChange,
		initialValues: { validRangeMeters: defaultRadius }
	}, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
		label: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.label"),
		name: "name",
		required: true,
		rules: [{ validator: function() {
			var _ref = require_asyncToGenerator._asyncToGenerator(function* (_rule, value) {
				if (!value) throw new Error(_pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.validation"));
				if (typeof value === "string") {
					if (value.trim()) return Promise.resolve();
				} else if (typeof value === "object") {
					if (Object.values(value).filter((item) => typeof item === "string" && item.trim()).length > 0) return Promise.resolve();
				}
				throw new Error(_pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.validation"));
			});
			return function validator(_x, _x2) {
				return _ref.apply(this, arguments);
			};
		}() }]
	}, /* @__PURE__ */ react.default.createElement(_pisell_materials.BaseTranslation, { placeholder: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.placeholder") })), /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__modal-grid" }, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
		label: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.label"),
		name: "latitude",
		required: true,
		rules: [{ required: true }, { validator: function() {
			var _ref2 = require_asyncToGenerator._asyncToGenerator(function* (_rule, value) {
				const text = String(value !== null && value !== void 0 ? value : "").trim();
				if (!text) return Promise.resolve();
				if (!COORDINATE_NUMBER_PATTERN.test(text)) throw new Error(_pisell_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(_pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.validation"));
				return Promise.resolve();
			});
			return function validator(_x3, _x4) {
				return _ref2.apply(this, arguments);
			};
		}() }]
	}, /* @__PURE__ */ react.default.createElement(antd.Input, { placeholder: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.placeholder") })), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
		label: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.label"),
		name: "longitude",
		required: true,
		rules: [{ required: true }, { validator: function() {
			var _ref3 = require_asyncToGenerator._asyncToGenerator(function* (_rule, value) {
				const text = String(value !== null && value !== void 0 ? value : "").trim();
				if (!text) return Promise.resolve();
				if (!COORDINATE_NUMBER_PATTERN.test(text)) throw new Error(_pisell_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(_pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.validation"));
				return Promise.resolve();
			});
			return function validator(_x5, _x6) {
				return _ref3.apply(this, arguments);
			};
		}() }]
	}, /* @__PURE__ */ react.default.createElement(antd.Input, { placeholder: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.placeholder") }))), /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
		label: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.valid-range.label"),
		required: true
	}, /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__modal-slider-row" }, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
		name: "validRangeMeters",
		noStyle: true,
		rules: [{ required: true }]
	}, /* @__PURE__ */ react.default.createElement(antd.Slider, {
		min: 0,
		max: 1e3
	})), /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__slider-value" }, _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.meters")(validRangeMeters)))), /* @__PURE__ */ react.default.createElement(antd.Alert, {
		message: _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.tip.google-maps"),
		type: "info",
		showIcon: true
	}), /* @__PURE__ */ react.default.createElement("div", {
		className: "saas-attendance-group-settings__map-placeholder saas-attendance-map-field__modal-map",
		style: { marginTop: "10px" }
	}, GoogleMapComponent && /* @__PURE__ */ 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)
	})));
});
const MapField = (0, react.forwardRef)((props, ref) => {
	const { value = [], onChange, defaultRadius = 100, className } = props;
	const locations = (0, react.useMemo)(() => normalizeLocations(value), [value]);
	const [addLocationOpen, setAddLocationOpen] = (0, react.useState)(false);
	const [editingLocationValue, setEditingLocationValue] = (0, react.useState)(null);
	const [editingLocationId, setEditingLocationId] = (0, react.useState)(null);
	const locationFormMapRef = (0, react.useRef)(null);
	const mapRef = (0, react.useRef)(null);
	const [isMapReady, setIsMapReady] = (0, react.useState)(false);
	const [activeLocationId, setActiveLocationId] = (0, react.useState)(null);
	const context = require_useEngineContext.default();
	(0, react.useEffect)(() => {
		if (!onChange || !Array.isArray(value) || value.length === 0) return;
		if (!value.some((item) => !(item === null || item === void 0 ? void 0 : item.address) || (item === null || item === void 0 ? void 0 : item.lat) != null || (item === null || item === void 0 ? void 0 : item.lng) != null || typeof (item === null || item === void 0 ? void 0 : item.name) === "string" || (item === null || item === void 0 ? void 0 : item.address) && typeof item.address === "object" && Object.keys(item.address).some((k) => k !== "lat" && k !== "lng"))) return;
		onChange(normalizeLocations(value));
	}, [onChange, value]);
	const GoogleMapComponent = (0, react.useMemo)(() => {
		var _context$appHelper2, _context$appHelper2$g;
		const app = context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2$g = _context$appHelper2.getApp) === null || _context$appHelper2$g === void 0 ? void 0 : _context$appHelper2$g.call(_context$appHelper2);
		if (!app) return null;
		return app.getPlugin("google-map") || null;
	}, [context]);
	(0, 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, 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, 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, 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: .8,
			strokeWeight: 2,
			fillColor: CIRCLE_FILL_COLOR,
			fillOpacity: .2
		}));
	}, [locations, defaultRadius]);
	(0, react.useImperativeHandle)(ref, () => ({ onAddLocation: function() {
		var _ref4 = require_asyncToGenerator._asyncToGenerator(function* () {
			const baseFormValue = {
				name: {
					original: "",
					en: "",
					"zh-CN": "",
					"zh-HK": "",
					"ja": "",
					"pt": ""
				},
				latitude: "",
				longitude: "",
				validRangeMeters: defaultRadius
			};
			setAddLocationOpen(true);
			setEditingLocationId(null);
			setEditingLocationValue(baseFormValue);
			const currentPosition = yield getCurrentPosition();
			if (currentPosition) setEditingLocationValue(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, baseFormValue), {}, {
				latitude: currentPosition.lat.toFixed(6),
				longitude: currentPosition.lng.toFixed(6)
			}));
		});
		return function onAddLocation() {
			return _ref4.apply(this, arguments);
		};
	}() }), [defaultRadius]);
	const handleSubmitLocation = function() {
		var _ref5 = require_asyncToGenerator._asyncToGenerator(function* () {
			if (!locationFormMapRef.current) return;
			try {
				const values = yield locationFormMapRef.current.validate();
				const nextLocation = {
					id: editingLocationId !== null && editingLocationId !== void 0 ? 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 || onChange === void 0 || onChange(nextLocations);
					setActiveLocationId(editingLocationId);
				} else {
					const nextLocations = [nextLocation, ...locations];
					onChange === null || onChange === void 0 || onChange(nextLocations);
					setActiveLocationId(nextLocation.id);
				}
				setAddLocationOpen(false);
				setEditingLocationValue(null);
				setEditingLocationId(null);
			} catch (error) {
				console.error("Validation failed:", error);
			}
		});
		return function handleSubmitLocation() {
			return _ref5.apply(this, arguments);
		};
	}();
	const handleEditLocation = (0, react.useCallback)((location) => {
		var _location$address$lat, _location$address$lng, _location$radius;
		setAddLocationOpen(true);
		setEditingLocationId(location.id);
		setEditingLocationValue({
			name: toMultiLangName(location.name),
			latitude: String((_location$address$lat = location.address.lat) !== null && _location$address$lat !== void 0 ? _location$address$lat : ""),
			longitude: String((_location$address$lng = location.address.lng) !== null && _location$address$lng !== void 0 ? _location$address$lng : ""),
			validRangeMeters: (_location$radius = location.radius) !== null && _location$radius !== void 0 ? _location$radius : defaultRadius
		});
	}, [defaultRadius]);
	const handleRemoveLocation = (locationId) => {
		const nextLocations = locations.filter((loc) => loc.id !== locationId);
		onChange === null || onChange === void 0 || onChange(nextLocations);
	};
	const handleLocationItemClick = (0, react.useCallback)((location) => {
		var _mapRef$current;
		setActiveLocationId(location.id);
		(_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 || _mapRef$current.setCamera({
			coordinate: {
				lat: location.address.lat,
				lng: location.address.lng
			},
			zoom: DEFAULT_ZOOM,
			animate: true
		});
	}, []);
	const handleMapReady = (0, react.useCallback)(() => {
		setIsMapReady(true);
	}, []);
	const handleMarkerClick = (0, react.useCallback)((markerId, marker) => {
		console.log("Marker clicked:", markerId, marker);
	}, []);
	(0, 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__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty" }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-icon" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Icon, {
		type: "pisell2-marker-pin-01",
		size: 48
	})), /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-title" }, _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.approved-locations.empty.title")), /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-desc" }, _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.approved-locations.empty.desc")));
	const renderLocationsList = () => /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__locations-list" }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-map-field__map-container" }, /* @__PURE__ */ 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__ */ react.default.createElement("div", { className: "saas-attendance-map-field__locations" }, locations.map((location) => /* @__PURE__ */ 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__ */ react.default.createElement("div", { className: "saas-attendance-map-field__location-header" }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__location-name" }, getLocationNameText(location.name)), /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-map-field__location-actions" }, /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "text",
		size: "small",
		icon: /* @__PURE__ */ react.default.createElement(_pisell_materials.Icon, {
			type: "pisell2-edit-05",
			size: 16
		}),
		className: "saas-attendance-map-field__edit-btn",
		onClick: (e) => {
			e.stopPropagation();
			handleEditLocation(location);
		}
	}), /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "text",
		size: "small",
		icon: /* @__PURE__ */ react.default.createElement(_pisell_materials.Icon, {
			type: "pisell2-trash-01",
			size: 16
		}),
		className: "saas-attendance-map-field__delete-btn",
		onClick: (e) => {
			e.stopPropagation();
			handleRemoveLocation(location.id);
		}
	}))), /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__location-meta" }, _pisell_utils.locales.getText("pisell2.attendance.group-settings.clock-in-method.add-location-modal.valid-range.label"), ": ", /* @__PURE__ */ react.default.createElement("span", null, location.radius || defaultRadius))))));
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `saas-attendance-group-settings__locations-box ${className || ""}` }, locations.length === 0 ? renderEmptyState() : renderLocationsList()), /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		open: addLocationOpen,
		title: _pisell_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: _pisell_utils.locales.getText(editingLocationId ? "pisell2.attendance.group-settings.actions.edit-location-confirm" : "pisell2.attendance.group-settings.actions.add-location-confirm"),
		cancelText: _pisell_utils.locales.getText("pisell2.attendance.group-settings.actions.cancel"),
		onOk: handleSubmitLocation
	}, /* @__PURE__ */ react.default.createElement(LocationFormMap, {
		ref: locationFormMapRef,
		value: editingLocationValue,
		onChange: setEditingLocationValue,
		defaultRadius
	})));
});
MapField.displayName = "MapField";
//#endregion
exports.default = MapField;
