import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, Dimensions, TouchableOpacity, Alert, } from 'react-native'; import { WebView } from 'react-native-webview'; import Icon from 'react-native-vector-icons/Ionicons'; import { apiService } from '../services/apiService'; const { width, height } = Dimensions.get('window'); export default function MapScreen() { const [properties, setProperties] = useState([]); const [loading, setLoading] = useState(true); const [refreshKey, setRefreshKey] = useState(0); useEffect(() => { loadMapData(); }, []); const loadMapData = async () => { try { setLoading(true); const data = await apiService.getPropertiesForMap(); setProperties(data); } catch (error) { console.error('Failed to load map data:', error); Alert.alert('Error', 'Failed to load map data'); } finally { setLoading(false); } }; const handleRefresh = () => { setRefreshKey(prev => prev + 1); loadMapData(); }; // Generate map HTML with markers const generateMapHTML = () => { const markers = properties.map(property => ({ id: property.id, lat: parseFloat(property.latitude || '2.0469'), lng: parseFloat(property.longitude || '45.3182'), title: property.title, price: property.price, type: property.type, image: property.image_url })).filter(marker => !isNaN(marker.lat) && !isNaN(marker.lng)); return `
πŸ“ ${properties.length} Properties | πŸ—ΊοΈ Live Mogadishu Map
`; }; return ( {/* Map Controls */} Refresh For Sale For Rent {/* Map */} {!loading ? ( { const { nativeEvent } = syntheticEvent; console.error('WebView error:', nativeEvent); }} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} renderLoading={() => ( Loading Mogadishu Map... )} /> ) : ( Loading Map Data... )} {/* Map Info */} Mogadishu, Somalia {properties.length} Properties Available Updated Live ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f8f9fa', }, controls: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 15, paddingVertical: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#e0e0e0', }, refreshButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0091B9', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 6, gap: 6, }, refreshText: { color: '#fff', fontSize: 14, fontWeight: '600', }, legend: { flexDirection: 'row', gap: 15, }, legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6, }, legendDot: { width: 12, height: 12, borderRadius: 6, borderWidth: 2, borderColor: '#fff', }, legendText: { fontSize: 12, color: '#666', fontWeight: '500', }, mapContainer: { flex: 1, position: 'relative', }, webView: { flex: 1, }, loadingOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: '#f8f9fa', justifyContent: 'center', alignItems: 'center', gap: 15, }, loadingText: { fontSize: 16, color: '#004F9B', fontWeight: '500', }, mapInfo: { backgroundColor: '#fff', paddingHorizontal: 15, paddingVertical: 10, borderTopWidth: 1, borderTopColor: '#e0e0e0', }, infoCard: { gap: 8, }, infoRow: { flexDirection: 'row', alignItems: 'center', gap: 8, }, infoText: { fontSize: 14, color: '#666', fontWeight: '500', }, });