import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import * as Location from 'expo-location';
import { LocationObject } from 'expo-location';
import { mapStyle } from '../../style/map';

export default function Index() {
    /**********************************狀態管理**********************************/
    const [location, setLocation] = useState<LocationObject>();

    useEffect(() => {
        (async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                return;
            }

            let location = await Location.getCurrentPositionAsync({});
            setLocation(location);
        })();
    }, []);
    /**********************************狀態管理**********************************/
    /**********************************組件初始化**********************************/
    /**********************************組件初始化**********************************/
    /**********************************異步函數**********************************/
    /**********************************異步函數**********************************/
    return (
        <View>
            {location && (
                <MapView
                    customMapStyle={mapStyle}
                    followsUserLocation={true}
                    initialRegion={{
                        latitude: location.coords.latitude,
                        longitude: location.coords.longitude,
                        latitudeDelta: 0.01,
                        longitudeDelta: 0.01
                    }}
                    showsUserLocation={true}
                    showsBuildings={false}
                    showsTraffic={false}
                    style={styles.map}
                >
                    <Marker
                        coordinate={{ latitude: 22.3193, longitude: 114.1694 }}
                        title="Marker Title"
                        onPress={() => {}}
                        description="Marker Description"
                    />
                </MapView>
            )}
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    map: {
        width: '100%',
        height: '100%'
    }
});