import React, { useState, useEffect, useContext } from "react";
import { StyleSheet, Text, View } from "react-native";
import OpenStreetMap from "../components/map/OpenStreetMap";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
import attachFocusToQuery from "../hooks/useFocus";
import {MapMarkerList} from "../components/MapMarkerList";

export default function MapFeedScreen() {
  const [position, setPosition] = useState(null);

  const context = useContext(CurrentLocationContext);
  const location = context.currentCoordinates;
  const focusChanged = attachFocusToQuery();


  useEffect(() => {
    setPosition({
      lat: location["latitude"],
      long: location["longitude"],
      zoom: 16.5,
    });
  }, [location]);


  return (
    <View style={styles.container}>
      <OpenStreetMap
        markersList={MapMarkerList({reload:focusChanged, renderRain:true})}
        // animateToPosition={position}
        centerUserLocation={true}
      />

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
  },
  callback: {
    position: "absolute",
    bottom: 30,
    alignSelf: "center",
    alignItems: "center",
    backgroundColor: "gray",
    width: "80%",
    padding: 10,
  },
  btn: {
    width: "80%",
    position: "absolute",
    top: 30,
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
    alignSelf: "center",
  },
  btns: {
    backgroundColor: "dodgerblue",
    borderRadius: 10,
    width: 100,
    padding: 10,
    margin: 4,
    alignItems: "center",
  },
  txt: {
    color: "white",
  },
});