import React, { useState, useRef, useEffect } from 'react'; import { View, Text, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import WebView from 'react-native-webview'; import { useRouter } from 'expo-router'; import { useAuth } from '@/context/AuthContext'; import { BoardingHouseAPI } from '@/services/api'; import { Input } from '@/components/ui/Input'; import { Button } from '@/components/ui/Button'; import { ScreenHeader } from '@/components/ui/ScreenHeader'; import { Card } from '@/components/ui/Card'; import { Colors, FontSize, Spacing, Radius } from '@/constants/theme'; import { Ionicons } from '@expo/vector-icons'; import * as Location from 'expo-location'; // Static HTML — never rebuilt. Pin is moved via injectJavaScript. const PICKER_HTML = `
`; function injectToMap(ref: React.RefObject | null>, payload: object) { ref.current?.injectJavaScript(` (function(){ var e=new MessageEvent('message',{data:${JSON.stringify(JSON.stringify(payload))}}); window.dispatchEvent(e);document.dispatchEvent(e); })();true; `); } export default function AddPropertyScreen() { const { user } = useAuth(); const router = useRouter(); const webViewRef = useRef>(null); const mapReady = useRef(false); const [name, setName] = useState(''); const [address, setAddress] = useState(''); const [description, setDescription] = useState(''); const [rentPrice, setRentPrice] = useState(''); const [totalRooms, setTotalRooms] = useState(''); const [availableRooms, setAvailableRooms] = useState(''); const [electricityBilling, setElectricityBilling] = useState<'metered' | 'fixed'>('metered'); const [electricityRate, setElectricityRate] = useState(''); const [waterBilling, setWaterBilling] = useState<'metered' | 'fixed'>('metered'); const [waterRate, setWaterRate] = useState(''); const [lat, setLat] = useState(10.3157); const [lng, setLng] = useState(123.8854); const [showMap, setShowMap] = useState(false); const [loading, setLoading] = useState(false); const [locating, setLocating] = useState(false); const [isDragging, setIsDragging] = useState(false); const [errors, setErrors] = useState>({}); async function locateMe() { setLocating(true); try { const { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { Alert.alert('Permission denied', 'Location permission is required.'); return; } const pos = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.High }); const { latitude, longitude } = pos.coords; setLat(latitude); setLng(longitude); // Show GPS dot + move pin to current location injectToMap(webViewRef, { type: 'gpsLocation', lat: latitude, lng: longitude }); injectToMap(webViewRef, { type: 'movePinTo', lat: latitude, lng: longitude }); // Start watching so GPS dot stays live Location.watchPositionAsync( { accuracy: Location.Accuracy.Balanced, distanceInterval: 5, timeInterval: 3000 }, (loc) => injectToMap(webViewRef, { type: 'gpsLocation', lat: loc.coords.latitude, lng: loc.coords.longitude }) ); } catch { Alert.alert('Error', 'Could not get location.'); } finally { setLocating(false); } } function validate() { const e: Record = {}; if (!name.trim()) e.name = 'Property name is required'; if (!address.trim()) e.address = 'Address is required'; if (!rentPrice || isNaN(Number(rentPrice))) e.rentPrice = 'Valid rent price required'; if (!totalRooms || isNaN(Number(totalRooms))) e.totalRooms = 'Total rooms required'; if (!availableRooms || isNaN(Number(availableRooms))) e.availableRooms = 'Available rooms required'; setErrors(e); return Object.keys(e).length === 0; } async function handleSubmit() { if (!validate()) return; setLoading(true); try { await BoardingHouseAPI.create({ landlord_id: user!.id, name: name.trim(), address: address.trim(), description: description.trim(), rent_price: parseFloat(rentPrice), total_rooms: parseInt(totalRooms), available_rooms: parseInt(availableRooms), electricity_billing: electricityBilling, electricity_rate: electricityBilling === 'fixed' ? parseFloat(electricityRate) : 0, water_billing: waterBilling, water_rate: waterBilling === 'fixed' ? parseFloat(waterRate) : 0, latitude: lat, longitude: lng, }); Alert.alert('Success', 'Property added successfully!', [{ text: 'OK', onPress: () => router.back() }]); } catch (err: any) { Alert.alert('Error', err.message); } finally { setLoading(false); } } return ( {/* Electricity */} Electricity Billing {(['metered', 'fixed'] as const).map(b => ( setElectricityBilling(b)} style={[styles.billingBtn, electricityBilling === b && styles.billingBtnActive]}> {b.charAt(0).toUpperCase() + b.slice(1)} ))} {electricityBilling === 'fixed' && ( )} {/* Water */} Water Billing {(['metered', 'fixed'] as const).map(b => ( setWaterBilling(b)} style={[styles.billingBtn, waterBilling === b && styles.billingBtnActive]}> {b.charAt(0).toUpperCase() + b.slice(1)} ))} {waterBilling === 'fixed' && ( )} {/* Map Picker */} Pin Location {locating ? 'Locating...' : 'Use GPS'} setShowMap(!showMap)}> {showMap ? 'Hide Map' : 'Open Map'} 📍 {lat.toFixed(6)}, {lng.toFixed(6)} {showMap && ( { try { const msg = JSON.parse(e.nativeEvent.data); if (msg.type === 'ready') { mapReady.current = true; } if (msg.type === 'dragging') { setIsDragging(msg.value); } if (msg.type === 'pin') { setLat(msg.lat); setLng(msg.lng); } } catch (_) {} }} javaScriptEnabled domStorageEnabled originWhitelist={['*']} /> Tap map or drag pin to set location )}