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";
import HeaderBarMenu from "../components/HeaderBarMenu";
import { getFormsAnswers } from "../hooks/useFormsAswers";
import SocketClient from "../api/Websockets/SocketClient";
import { useFiltering } from "../hooks/useFiltering";
import useSocketMarkers from "../hooks/useSocketMarkers";

export default function MapFeedScreen(props) {
  HeaderBarMenu(props.navigation);

  const focusChanged = attachFocusToQuery();
  //const [error, setError] = useState(false);
 //const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
 
  const [dataOptionsToShow, setDataOptionsToShow] = useState({
    oficial: {
      automaticPluviometer: false,
      susceptibilityAreas: false,
    },
    citzen: {
      floodRisk: false,
      pluviometer: false,
      rain: true,
      floodZones: false,
      riverFlood: false,
    },
  });  

  const markers = useSocketMarkers();
 //  console.log(markers);

  // 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}
        dataOptionsToShow={dataOptionsToShow}
        setDataOptionsToShow={setDataOptionsToShow}
      />
    </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",
  },
});