import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import OpenStreetMap from "../components/map/OpenStreetMap";
import attachFocusToQuery from "../hooks/useFocus";
import HeaderBarMenu from "../components/HeaderBarMenu";
import useSocketMarkers from "../hooks/useSocketMarkers";
import LoadingMarkersModal from "../components/LoadingMarkersModal";

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

  const focusChanged = attachFocusToQuery();
 
  const [dataOptionsToShow, setDataOptionsToShow] = useState({
    oficial: {
      automaticPluviometer: false,
      susceptibilityAreas: false,
    },
    citzen: {
      floodRisk: true,
      pluviometer: true,
      rain: true,
      floodZones: true,
      riverFlood: true,
    },
  });  

  const markers = useSocketMarkers();

  return (
    <View style={styles.container}>
      <OpenStreetMap
        markers={markers}
        centerUserLocation={true}
        dataOptionsToShow={dataOptionsToShow}
        setDataOptionsToShow={setDataOptionsToShow}
      />  
      <LoadingMarkersModal
        show={markers.markers.size <= 0}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
  },
});