import { StyleSheet, View } from "react-native";
import React from "react";
import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";

function isRequestedValue(
  item,
  renderRain,
  renderFlood,
  renderRiver,
  renderPluviometer
) {
  
  return (
    (item.name == "pluviometer" && renderPluviometer) ||
    (item.name == "rain" && renderRain) ||
    (item.name == "river" && renderRiver) ||
    (item.name == "flood" && renderFlood)
  );
}

function MapMarkerList({
  reload = null,
  renderRain = true,
  renderFlood = true,
  renderRiver = true,
  renderPluviometer = true,
}) {
  
  const markers = useMarkers(reload);
  return (
    <>
      {[...markers.markers]
        .filter((item) =>
          isRequestedValue(
            item,
            renderRain,
            renderFlood,
            renderRiver,
            renderPluviometer
          )
        )
        .map(({ ID, ...val }) => {
          return <MapMarker key={ID.toString()} {...val} />;
        })}
    </>
  );
}

export { MapMarkerList };