const formatDate = (date) => {
  const day = date.getDate();
  const month = date.getMonth() + 1;
  const year = date.getFullYear();

  return `${day}/${month}/${year}`;
};
const formatTime = (date) => {
  return date.toTimeString().split(" ")[0];
};

export function initMarkers(markerList, L, map) {
  markerList.forEach((customMarker) => {
    const marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
    const popUpContentTitle = "<h1>" + customMarker.title + "</h1>";
    const popUpContentdescription = "<p>" + customMarker.description + "</p>";
    const popUpContentImage =
      "<img src='/img/" + customMarker.imgName + "'</img>";
    const popUpContentDate =
      "<br><p>Inserito il: " +
      markerData.ts.substring(0, 10) +
      "<br>alle " +
      markerData.ts.substring(11, 16) +
      "</p>";
    const popUpContent =
      popUpContentTitle +
      popUpContentdescription +
      popUpContentImage +
      popUpContentDate;
    marker.bindPopup(popUpContent).openPopup();
  });
}

export function createMarker(markerData, L, map, returnMarker = false) {
  const marker = L.marker([
    markerData.coordinate.y,
    markerData.coordinate.x,
  ]).addTo(map);
  const date = new Date(markerData.ts);

  const popUpContentTitle = "<h1>" + markerData.name + "</h1>";
  const popUpContentdescription = "<p>" + markerData.description + "</p>";
  const popUpContentImage =
    "<img src='/imgs/" + markerData.filename + "'</img>";
  const popUpContentDate = `<br><p>Inserito il: ${formatDate(
    date
  )} <br>alle: ${formatTime(date)}</p>`;

  //const popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
  const popUpContent =
    popUpContentTitle +
    popUpContentdescription +
    popUpContentImage +
    popUpContentDate; //+ popUpContentHour
  marker.bindPopup(popUpContent);
  if (returnMarker) {
    return marker;
  }
}

export function createMarkerTemp(markerData, L, map, returnMarker = false) {
  const marker = L.marker([
    markerData.coordinate.y,
    markerData.coordinate.x,
  ]).addTo(map);
  const popUpContentdescription = "<p>" + markerData.description + "</p>";
  const popUpContent = popUpContentdescription;
  marker.bindPopup(popUpContent);
  if (returnMarker) {
    return marker;
  }
}

export function updateMarkers(markerList, L, map) {
  const layers = L.LayerGroup(); //layers contains all markers..
  const contained = []; //makers in map boundingbox

  layers.eachLayer(function (l) {
    if (
      layer instanceof L.Marker &&
      map.getBounds().contains(layer.getLatLng())
    )
      contained.push(layer);
  });
  console.log(contained);
}