"use client";
import { useEffect, useMemo, useState } from "react";
import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { useI18n } from "@/lib/i18n";
import { X } from "lucide-react";
const RIYADH = { lat: 24.7136, lng: 46.6753 };
const pin = L.divIcon({
className: "",
html: ``,
iconSize: [18, 18],
iconAnchor: [9, 18],
});
function savedPoint(lat: string, lng: string) {
if (!lat.trim() || !lng.trim()) return null;
const latitude = Number(lat);
const longitude = Number(lng);
if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return null;
return { lat: latitude, lng: longitude };
}
function MapClick({ onPick }: { onPick: (lat: number, lng: number) => void }) {
useMapEvents({
click(event) {
onPick(event.latlng.lat, event.latlng.lng);
},
});
return null;
}
export default function LocationPicker({
lat,
lng,
onClose,
onConfirm,
}: {
lat: string;
lng: string;
onClose: () => void;
onConfirm: (value: { lat: string; lng: string; label: string }) => void;
}) {
const { t, lang } = useI18n();
const saved = useMemo(() => savedPoint(lat, lng), [lat, lng]);
const [point, setPoint] = useState(saved || RIYADH);
const [ready, setReady] = useState(Boolean(saved));
const [saving, setSaving] = useState(false);
useEffect(() => {
if (saved) return;
if (!navigator.geolocation) {
setReady(true);
return;
}
navigator.geolocation.getCurrentPosition(
(position) => {
setPoint({ lat: position.coords.latitude, lng: position.coords.longitude });
setReady(true);
},
() => setReady(true),
{ enableHighAccuracy: true, timeout: 10000 }
);
}, [saved]);
const confirm = async () => {
if (saving) return;
setSaving(true);
const latitude = point.lat.toFixed(6);
const longitude = point.lng.toFixed(6);
let label = `${latitude}, ${longitude}`;
try {
const response = await fetch(
`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`,
{ headers: { "Accept-Language": lang === "en" ? "en" : "ar" } }
);
if (response.ok) {
const body = (await response.json()) as { display_name?: string };
if (body.display_name) label = body.display_name;
}
} catch {
label = `${latitude}, ${longitude}`;
}
onConfirm({ lat: latitude, lng: longitude, label });
setSaving(false);
};
return (
{t("location")}
{t("pickOnMap")}
{!ready ? (
{t("loading")}
) : (
setPoint({ lat: nextLat, lng: nextLng })} />
{
const next = event.target.getLatLng();
setPoint({ lat: next.lat, lng: next.lng });
},
}}
/>
)}
);
}