import React, { useContext, useState } from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import MapView 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";

// NOTE: 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 [marker, setMarker] = useState(context.eventCoordinates);

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

    const address = await Location.reverseGeocodeAsync(coordenadas);
    if (address[0] != undefined) {      
      var street = (address[0].street == null ? "" : address[0].street);
      var number = (address[0].name == null ? "" : ", " + address[0].name);
      var district = (address[0].district == null ? "" : "\n" + address[0].district);
      context.saveNewLocation(street + number +  district, coordenadas);
    } else {
      //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
      context.saveNewLocation("Erro ao carregar endereço", coordenadas);
    }
  };

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

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

  const default_location = {
    latitude: -12.901799,
    longitude: -51.692116,
    latitudeDelta: 70,
    longitudeDelta: 70 * (screen_width / screen_height),
  };

  return (
    <View style={styles.container}>
      <MapView
        style={styles.mapStyle}
        showsUserLocation={true}
        initialRegion={{ ...default_location }}
        region={{
          latitude: marker.latitude,
          longitude: marker.longitude,
          ...lat_long_delta,
        }}
        onRegionChangeComplete={(r) => {
         // console.log(r);
          setMarker({ latitude: r.latitude, longitude: r.longitude });
        }}
      />
      <View style={styles.markerFixed}>
        <Image
          style={styles.marker}
          resizeMode="contain"
          source={require("../assets/map-marker.png")}
        />
      </View>

      <View style={styles.submit_btn}>
        <TouchableOpacity onPress={() => setLocation()}>
          <View style={styles.button}>
            <Text style={styles.text}>Confirmar</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  submit_btn: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    padding: 20,
  },
  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",
  },
  markerFixed: {
    left: "50%",
    marginLeft: -24,
    marginTop: -48,
    position: "absolute",
    top: "50%",
    height: 48,
    width: 48,
  },
  text: {
    color: colors.white,
    fontSize: 16,
    textTransform: "uppercase",
    fontWeight: "bold",
  },
  marker: {
    height: 48,
    width: 48,
  },
});

export default MapFormScreen;