/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { renderToString } from "https://esm.sh/react-dom@18.2.0/server?deps=react@18.2.0,react-dom@18.2.0"; import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; const GOOGLE_MAPS_API_KEY = "AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U"; function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Updated map style with darker shades for better contrast const mapStyles = [ { elementType: "geometry", stylers: [{ color: "#1c2331" }] }, { elementType: "labels.text.stroke", stylers: [{ color: "#1c2331" }] }, { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] }, { featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }], }, { featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }], }, { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#263c3f" }], }, { featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#6b9a76" }], }, { featureType: "road", elementType: "geometry", stylers: [{ color: "#38414e" }], }, { featureType: "road", elementType: "geometry.stroke", stylers: [{ color: "#212a37" }], }, { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#9ca5b3" }], }, { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#746855" }], }, { featureType: "road.highway", elementType: "geometry.stroke", stylers: [{ color: "#1f2835" }], }, { featureType: "road.highway", elementType: "labels.text.fill", stylers: [{ color: "#f3d19c" }], }, { featureType: "transit", elementType: "geometry", stylers: [{ color: "#2f3948" }], }, { featureType: "transit.station", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }], }, { featureType: "water", elementType: "geometry", stylers: [{ color: "#17263c" }], }, { featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#515c6d" }], }, { featureType: "water", elementType: "labels.text.stroke", stylers: [{ color: "#17263c" }], }, ]; // CSS styles const styles = { mapContainer: { width: "100%", height: "100%", borderRadius: "8px", overflow: "hidden", }, }; // Global styles to hide Google Maps attribution and controls const globalStyles = ` a[href^="http://maps.google.com/maps"] { display: none !important; } a[href^="https://maps.google.com/maps"] { display: none !important; } .gmnoprint a, .gmnoprint span, .gm-style-cc { display: none; } .gmnoprint div { background: none !important; } `; // Global Google Maps API loading state let googleMapsPromise = null; // Function to load Google Maps API globally function loadGoogleMapsAPI() { if (googleMapsPromise) { return googleMapsPromise; } googleMapsPromise = new Promise((resolve, reject) => { if (window.google && window.google.maps && window.google.maps.places && window.google.maps.geometry) { resolve(); return; } const script = document.createElement("script"); script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places,geometry&callback=initGoogleMaps`; script.async = true; script.defer = true; document.head.appendChild(script); window.initGoogleMaps = () => { if (window.google && window.google.maps && window.google.maps.places && window.google.maps.geometry) { resolve(); } else { reject(new Error("Google Maps API failed to load completely")); } }; script.onerror = () => { reject(new Error("Failed to load Google Maps API script")); }; }); return googleMapsPromise; } export function MapComponent( { pickupLocation, dropoffLocation, active, showZoomControl }: { pickupLocation: string | null; dropoffLocation: string | null; active: boolean; showZoomControl: boolean; }, ) { const mapRef = useRef(null); const [map, setMap] = useState(null); const [pickupMarker, setPickupMarker] = useState(null); const [dropoffMarker, setDropoffMarker] = useState(null); const [pathCoordinates, setPathCoordinates] = useState([]); const animationRef = useRef(null); const [googleMapsLoaded, setGoogleMapsLoaded] = useState(false); const directionsServiceRef = useRef(null); const directionsRendererRef = useRef(null); const [mapFullyLoaded, setMapFullyLoaded] = useState(false); const animatedPolylineRef = useRef(null); useEffect(() => { loadGoogleMapsAPI().then(() => { setGoogleMapsLoaded(true); }).catch((error) => { console.error("Error loading Google Maps API:", error); }); // Add global styles const styleTag = document.createElement("style"); styleTag.type = "text/css"; styleTag.appendChild(document.createTextNode(globalStyles)); document.head.appendChild(styleTag); return () => { document.head.removeChild(styleTag); }; }, []); useEffect(() => { if (googleMapsLoaded && !map) { initMap(); } }, [googleMapsLoaded]); useEffect(() => { if (map) { updateMap(); } }, [map, pickupLocation, dropoffLocation]); useEffect(() => { if (active && pickupLocation && dropoffLocation && mapFullyLoaded) { startAnimation(); } else { stopAnimation(); } return () => { stopAnimation(); }; }, [active, pickupLocation, dropoffLocation, pathCoordinates, mapFullyLoaded]); function initMap() { try { if (!window.google || !window.google.maps) { console.error("Google Maps API not loaded"); return; } const newMap = new window.google.maps.Map(mapRef.current, { center: { lat: 0, lng: 0 }, zoom: 2, zoomControl: showZoomControl, mapTypeControl: false, scaleControl: false, streetViewControl: false, rotateControl: false, fullscreenControl: false, disableDefaultUI: true, gestureHandling: "greedy", styles: mapStyles, }); newMap.addListener("tilesloaded", () => { setMapFullyLoaded(true); }); setMap(newMap); directionsServiceRef.current = new window.google.maps.DirectionsService(); directionsRendererRef.current = new window.google.maps.DirectionsRenderer({ map: newMap, suppressMarkers: true, polylineOptions: { strokeColor: "#FFFFFF", strokeOpacity: 0.8, strokeWeight: 2, }, }); } catch (error) { console.error("Error initializing map:", error); } } async function updateMap() { try { if (pickupMarker) pickupMarker.setMap(null); if (dropoffMarker) dropoffMarker.setMap(null); if (directionsRendererRef.current) directionsRendererRef.current.setMap(null); if (animatedPolylineRef.current) animatedPolylineRef.current.setMap(null); const markers = []; if (!pickupLocation && !dropoffLocation) { map.setCenter({ lat: 0, lng: 0 }); map.setZoom(2); } else if (pickupLocation && !dropoffLocation) { const marker = await setMarkerAndCenter(pickupLocation, "pickup"); if (marker) markers.push(marker); } else if (!pickupLocation && dropoffLocation) { const marker = await setMarkerAndCenter(dropoffLocation, "dropoff"); if (marker) markers.push(marker); } else if (pickupLocation && dropoffLocation) { const pickupMarker = await setMarkerAndCenter(pickupLocation, "pickup"); const dropoffMarker = await setMarkerAndCenter(dropoffLocation, "dropoff"); if (pickupMarker && dropoffMarker) { markers.push(pickupMarker, dropoffMarker); await drawRoute(pickupMarker.getPosition(), dropoffMarker.getPosition()); fitRouteBounds(); } } } catch (error) { console.error("Error updating map:", error); } } function setMarkerAndCenter(location, type) { return new Promise((resolve, reject) => { if (!window.google || !window.google.maps) { reject(new Error("Google Maps API not loaded")); return; } const geocoder = new window.google.maps.Geocoder(); geocoder.geocode({ address: location }, (results, status) => { if (status === "OK" && results[0]) { const position = results[0].geometry.location; const marker = new window.google.maps.Marker({ position, map, icon: createCustomMarker(type), }); if (type === "pickup") { setPickupMarker(marker); } else { setDropoffMarker(marker); } if (!(pickupLocation && dropoffLocation)) { map.setCenter(position); map.setZoom(12); } resolve(marker); } else { reject(new Error(`Geocoding failed for ${location}`)); } }); }); } function createCustomMarker(type, size = 24) { const outerColor = "#ffffff"; const innerColor = "#121212"; const shape = type === "pickup" ? "circle" : "rect"; const svg = ` `; return { url: "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg), scaledSize: new window.google.maps.Size(size, size), }; } function drawRoute(start, end) { return new Promise((resolve, reject) => { if (!directionsServiceRef.current) { reject(new Error("Directions Service not initialized")); return; } directionsServiceRef.current.route( { origin: start, destination: end, travelMode: window.google.maps.TravelMode.DRIVING, }, (result, status) => { if (status === window.google.maps.DirectionsStatus.OK) { directionsRendererRef.current.setDirections(result); directionsRendererRef.current.setMap(map); const route = result.routes[0]; const newPathCoordinates = route.overview_path; setPathCoordinates(newPathCoordinates); resolve(result); } else { reject(new Error(`Directions request failed: ${status}`)); } }, ); }); } function fitRouteBounds() { if (directionsRendererRef.current && directionsRendererRef.current.getDirections()) { const bounds = new window.google.maps.LatLngBounds(); const route = directionsRendererRef.current.getDirections().routes[0]; route.legs.forEach((leg) => { leg.steps.forEach((step) => { step.path.forEach((point) => { bounds.extend(point); }); }); }); map.fitBounds(bounds); } } function startAnimation() { if (animationRef.current) return; if (!window.google || !window.google.maps || !map) { console.error("Google Maps or map instance not available"); return; } // Hide the directions renderer during animation if (directionsRendererRef.current) { directionsRendererRef.current.setMap(null); } // Create a new polyline for the animation animatedPolylineRef.current = new window.google.maps.Polyline({ path: [], geodesic: true, strokeColor: "#FFFFFF", strokeOpacity: 1.0, strokeWeight: 3, map: map, }); let step = 0; const numSteps = 200; // You can adjust this for smoother or faster animation function animate() { const path = animatedPolylineRef.current.getPath(); path.push(pathCoordinates[step]); step++; if (step >= pathCoordinates.length) { // Reset to the start of the path step = 0; path.clear(); } animationRef.current = window.requestAnimationFrame(animate); } animate(); } function stopAnimation() { if (animationRef.current) { window.cancelAnimationFrame(animationRef.current); animationRef.current = null; } if (animatedPolylineRef.current) { animatedPolylineRef.current.setMap(null); animatedPolylineRef.current = null; } // Show the directions renderer again if (directionsRendererRef.current && map) { directionsRendererRef.current.setMap(map); } } return

; } export function AutocompleteInput( { value, onChange, placeholder, icon: Icon }: { value: string; onChange: (value: string) => void; placeholder: string; icon: any; }, ) { const [isOpen, setIsOpen] = useState(false); const [inputValue, setInputValue] = useState(value); const [predictions, setPredictions] = useState([]); const autocompleteService = useRef(null); const inputRef = useRef(null); useEffect(() => { loadGoogleMapsAPI().then(() => { if (window.google && window.google.maps && window.google.maps.places) { autocompleteService.current = new window.google.maps.places.AutocompleteService(); } else { console.error("Google Maps Places library not loaded"); } }).catch((error) => { console.error("Error loading Google Maps API:", error); }); }, []); useEffect(() => { setInputValue(value); }, [value]); const fetchPredictions = useCallback( debounce((input) => { if (input.length > 0 && autocompleteService.current) { autocompleteService.current.getPlacePredictions( { input }, (results, status) => { if (status === window.google.maps.places.PlacesServiceStatus.OK) { setPredictions(results); } else { console.error("Error fetching place predictions:", status); setPredictions([]); } }, ); } else { setPredictions([]); } }, 300), [], ); const handleInputChange = (e) => { const newValue = e.target.value; setInputValue(newValue); fetchPredictions(newValue); if (newValue === "") { onChange(""); } }; const handleOptionSelect = (place) => { setInputValue(place.description); onChange(place.description); setPredictions([]); setIsOpen(false); }; return (

{Icon && (

)} setIsOpen(true)} onBlur={() => setTimeout(() => setIsOpen(false), 200)} placeholder={placeholder} className={`w-full p-2 ${ Icon ? "pl-10" : "" } border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-100`} />

{isOpen && predictions.length > 0 && (

handleOptionSelect(prediction)} className="px-4 py-2 hover:bg-gray-100 cursor-pointer" > {prediction.description}

)}

); }

notUberRide