import React, { useContext } from "react";
import { Button, StyleSheet, View, Text } from "react-native";
import MapView, { Marker } from "react-native-maps";

import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions";

import useLocation from "../hooks/useLocation";
import * as Location from 'expo-location';
import { EventLocationContext } from "../context/EventLocationContext";


//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)

const MapFormScreen = (props) => {
   // const location = useLocation({
   //     latitude: -23.533773,
    //    longitude:  -46.625290,
    //});
    const getAddress = async(coordenadas) => {
        Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
    
        const address = await Location.reverseGeocodeAsync(coordenadas.x);
       // console.log(address);
        context.saveNewLocation(address[0].street+", " + address[0].name +"\n" +  address[0].district, coordenadas.x);
    }
    
    const context = useContext(EventLocationContext);

    // console.log(markers);
    const map_scale = 0.003;
    const lat_long_delta = {
        latitudeDelta: map_scale,
        longitudeDelta: map_scale * (screen_width / screen_height),
    };

    //const local = useLocation();
    //Deixei a localizção setada em sp só para fazer os testes

    return (
        <View style={styles.container}>
            <MapView
                style={styles.mapStyle}
                showsUserLocation={true}
                initialRegion={{
                    latitude: -23.533773,
                    longitude: -46.625290,
                    ...lat_long_delta,
                }}
                region={{
                    latitude: -23.533773,
                    longitude:  -46.625290,
                    ...lat_long_delta,
                }}
            >
                <Marker
                    draggable={true}
                    coordinate={{
                        latitude: -23.533773,
                        longitude:  -46.625290,
                    }}
                    onDragEnd={(e) =>
                        getAddress({ x: e.nativeEvent.coordinate })
                    }
                ></Marker>
            </MapView>

            <Button title="Confirmar" onPress={() => props.navigation.goBack(null)} />
            <Text>{context.eventLocation.toString()}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.black,
        flex: 1,
    },
    mapStyle: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
});

export default MapFormScreen;