import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, Button, View } from 'react-native';
import { MapView, Marker, PropertyMap, CameraPresets } 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 style={{ marginTop: 8, flexDirection: 'row', justifyContent: 'space-between' }}>
                            <Button
                                title="Tilt 60°"
                                onPress={() =>
                                    mapRef.current?.animateCamera(
                                        { center: { latitude: 37.78825, longitude: -122.4324 }, pitch: 60 },
                                        { duration: 800 }
                                    )
                                }
                            />
                            <Button
                                title="Rotate 90°"
                                onPress={() =>
                                    mapRef.current?.animateCamera(
                                        { center: { latitude: 37.78825, longitude: -122.4324 }, heading: 90 },
                                        { duration: 800 }
                                    )
                                }
                            />
                            <Button
                                title="Zoom In"
                                onPress={() =>
                                    mapRef.current?.animateCamera(
                                        { center: { latitude: 37.78825, longitude: -122.4324 }, zoom: 15 },
                                        { duration: 800 }
                                    )
                                }
                            />
                        </View>

                        <View style={{ marginTop: 8, flexDirection: 'row', justifyContent: 'space-between' }}>
                            <Button
                                title="Overlook"
                                onPress={() =>
                                    mapRef.current?.animateCamera(
                                        CameraPresets.viewOverlook({ latitude: 37.78825, longitude: -122.4324 }),
                                        { duration: 1000 }
                                    )
                                }
                            />
                            <Button
                                title="Street"
                                onPress={() =>
                                    mapRef.current?.animateCamera(
                                        CameraPresets.streetLevel({ latitude: 37.78825, longitude: -122.4324 }),
                                        { duration: 1000 }
                                    )
                                }
                            />
                            <Button
                                title="Overview"
                                onPress={() =>
                                    mapRef.current?.animateCamera(
                                        CameraPresets.overview({ latitude: 37.78825, longitude: -122.4324 }),
                                        { duration: 1000 }
                                    )
                                }
                            />
                        </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 }
});
