import React, { useEffect, useContext, useState } from "react";
import { StyleSheet, View } from "react-native";
import OpenStreetMap from "../components/map/OpenStreetMap";
import attachFocusToQuery from "../hooks/useFocus";
import { MapMarkerList } from "../components/MapMarkerList";
import formsApi from "../api/getforms";
import useMarkers from "../hooks/selectFromDB";

export default function MapFeedScreen() {
  const focusChanged = attachFocusToQuery();
  const [error, setError] = useState(false);
  const markers = useMarkers(focusChanged);

  // useEffect(() => {
  //   loadForms();
  // }, []);

  // const loadForms = async () => {
  //   const response = await formsApi.getForms();
  //   console.log(response);
  //   if (!response.ok) {
  //     console.log("resposta não ok!");
  //     return setError(true);
  //   }
  //   setError(false);
  // }


  return (
    <View style={styles.container}>
      <OpenStreetMap
        markers={markers}
        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",
  },
});