import React, { useContext, useState } 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 * as Location from 'expo-location';
import { EventLocationContext } from "../context/EventLocationContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { CurrentLocationContext } from "../context/CurrentLocationContext";


//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 context = useContext(EventLocationContext);  //local do evento
    const contextLocation = useContext(CurrentLocationContext) //local do usuário
    const location = contextLocation.currentCoordinates;

    const [marker, setMarker] = useState(context.eventCoordinates);

    const getAddress = async (coordenadas) => {
        Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");

        const address = await Location.reverseGeocodeAsync(coordenadas);
        context.saveNewLocation(address[0].street + ", " + address[0].name + "\n" + address[0].district, coordenadas);
    }

    const setLocation = () => {
        getAddress(marker);
        props.navigation.goBack(null);
    }

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

    return (
        <View style={styles.container}>
            <MapView
                style={styles.mapStyle}
                showsUserLocation={true}
                initialRegion={{
                    latitude: -23.533773,
                    longitude: -46.625290,
                    ...lat_long_delta,
                }}
                region={{
                    latitude: location.latitude,
                    longitude: location.longitude,
                    ...lat_long_delta,
                }}
            >
                <Marker
                    draggable={true}
                    coordinate={{
                        latitude: context.eventCoordinates.latitude,
                        longitude: context.eventCoordinates.longitude,
                    }}
                    onDragEnd={(e) =>
                        setMarker({ x: e.nativeEvent.coordinate }.x)
                    }
                ></Marker>
            </MapView>
            <View style={{ flexDirection: "column", flex: 1, justifyContent: "flex-end", padding: 10 }}>
                <TouchableOpacity
                    onPress={() => setLocation()}>
                    <View style={styles.button}>
                        <Text style={styles.text}>Confirmar</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.black,
        flex: 1,
    },
    mapStyle: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    button: {
        backgroundColor: "#1976D2",
        borderRadius: 20,
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: 42,
        marginVertical: 10,
        textAlign: "center",
    },
    text: {
        color: colors.white,
        fontSize: 16,
        textTransform: "uppercase",
        fontWeight: "bold",
    },
});

export default MapFormScreen;