"use client"; import { Button } from "@/src/elements/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/src/elements/ui/dialog"; import { Input } from "@/src/elements/ui/input"; import { LocationPickerModalProps } from "@/src/types/components/chat"; import L from "leaflet"; import "leaflet/dist/leaflet.css"; import { Loader2, MapPin, Navigation, Search, X } from "lucide-react"; import React, { useCallback, useEffect, useState } from "react"; import { MapContainer, Marker, TileLayer, useMap, useMapEvents } from "react-leaflet"; import { toast } from "sonner"; const customIcon = new L.Icon({ iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png", iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png", shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png", iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41], }); // Map events component to handle clicks const MapEvents = ({ onLocationSelect }: { onLocationSelect: (lat: number, lng: number) => void }) => { useMapEvents({ click(e) { onLocationSelect(e.latlng.lat, e.latlng.lng); }, }); return null; }; // Component to handle map center updates const ChangeView = ({ center }: { center: [number, number] }) => { const map = useMap(); useEffect(() => { map.setView(center, map.getZoom()); }, [center, map]); return null; }; const LocationPickerModal = ({ isOpen, onClose, onSend }: LocationPickerModalProps) => { const [position, setPosition] = useState<[number, number]>([19.076, 72.8777]); // Default Mumbai const [address, setAddress] = useState(""); const [searchQuery, setSearchQuery] = useState(""); const [isSearching, setIsSearching] = useState(false); const [isLocating, setIsLocating] = useState(false); const [isReverseGeocoding, setIsReverseGeocoding] = useState(false); // Fetch address from coordinates const fetchAddress = useCallback(async (lat: number, lng: number) => { setIsReverseGeocoding(true); try { const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`, { headers: { "User-Agent": "Wapi-Chat-App" } }); const data = await response.json(); setAddress(data.display_name || `${lat.toFixed(6)}, ${lng.toFixed(6)}`); } catch (error) { console.error("Failed to fetch address:", error); setAddress(`${lat.toFixed(6)}, ${lng.toFixed(6)}`); } finally { setIsReverseGeocoding(false); } }, []); // Handle location selection from map const handleLocationSelect = useCallback( (lat: number, lng: number) => { setPosition([lat, lng]); fetchAddress(lat, lng); }, [fetchAddress] ); // Handle search const handleSearch = async (e?: React.FormEvent) => { e?.preventDefault(); if (!searchQuery.trim()) return; setIsSearching(true); try { const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery)}&limit=1`, { headers: { "User-Agent": "Wapi-Chat-App" } }); const data = await response.json(); if (data && data.length > 0) { const lat = parseFloat(data[0].lat); const lng = parseFloat(data[0].lon); setPosition([lat, lng]); setAddress(data[0].display_name); } else { toast.error("Location not found"); } } catch (error) { toast.error(`Search failed ${error}`); } finally { setIsSearching(false); } }; // Get current location const getCurrentLocation = () => { if (!navigator.geolocation) return; setIsLocating(true); navigator.geolocation.getCurrentPosition( (pos) => { const { latitude, longitude } = pos.coords; setPosition([latitude, longitude]); fetchAddress(latitude, longitude); setIsLocating(false); }, (err) => { console.error("Geolocation error:", err); setIsLocating(false); }, { enableHighAccuracy: true } ); }; // Initial location fetch useEffect(() => { if (isOpen) { getCurrentLocation(); } }, [isOpen]); const handleSendLocation = () => { onSend({ latitude: position[0], longitude: position[1], address: address, }); onClose(); }; const handleClose = () => { onClose(); }; return ( ); }; const SendIcon = ({ className }: { className?: string }) => ( ); export default LocationPickerModal;