import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, Button, View } from 'react-native';
import { MapView, Marker, PropertyMap } from '@lynkedup/map-sdk';
import type { MapHandle } from '@lynkedup/map-sdk';

export default function App() {
    const mapRef = useRef<MapHandle | null>(null);
    const [showPropertyMap, setShowPropertyMap] = useState(false);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.controls}>
                <Button title="Toggle SDK Example" onPress={() => setShowPropertyMap((s) => !s)} />
                {!showPropertyMap && (
                    <View style={{ flexDirection: 'row' }}>
                        <Button
                            title="Fly to SF"
                            onPress={() => mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 })}
                        />
                        <Button
                            title="Fit Bounds"
                            onPress={() =>
                                mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 })
                            }
                        />
                    </View>
                )}
            </View>

            {showPropertyMap ? (
                <PropertyMap apiUrl="http://64.227.108.180:5000/property-search" />
            ) : (
                <MapView
                    ref={mapRef}
                    style={styles.map}
                    initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
                >
                    <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
                </MapView>
            )}
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1 },
    controls: { position: 'absolute', top: 40, left: 10, right: 10, zIndex: 1000, flexDirection: 'row', justifyContent: 'space-between' },
    map: { flex: 1 }
});