let color = "#002880";
let COLORS = {
  M: color,
  R: "orange",
  P: "#60aa12",
  I: "#c4b5fd",
  inactive: "gray",
};

let geojsonMarkerOptions = {
  radius: 10,
  // fillColor: color,
  // color: "#000",
  weight: 2,
  opacity: 1,
  fillOpacity: 0.6,
};

async function main_map_init(map, options) {
  // Global variable JunaCat defined in map.html
  JunaCat.map = map;
  // map.setView([41.4, 1.75], 8.5);
  // Download GeoJSON via Ajax``
  let resp = await fetch(JunaCat.dataUrl);
  let data = await resp.json();
  JunaCat.features = data.features;

  // https://github.com/brunob/leaflet.fullscreen
  L.control
    .fullscreen({
      position: "topleft", // change the position of the button can be topleft, topright, bottomright or bottomleft, default topleft
      title: "Pantalla completa", // change the title of the button, default Full Screen
      titleCancel: "Surt de pantalla completa", // change the title of the button when fullscreen is on, default Exit Full Screen
      // content: null, // change the content of the button, can be HTML, default null
      // forceSeparateButton: true, // force separate button to detach from zoom buttons, default false
      // forcePseudoFullscreen: true, // force use of pseudo full screen even if full screen API is available, default false
      fullscreenElement: false, // Dom element to render in full screen, false by default, fallback to map._container
    })
    .addTo(map);

  L.geoJson(data, {
    onEachFeature: (feature, layer) => {
      layer.bindTooltip(feature.properties.name, { direction: "top" });
      // layer.bindPopup(
      //   `
      //   <b>${feature.properties.name}</b>
      //   <br/>
      //   <em>${feature.properties.city}</em>
      //   <br/>
      //   <a target="_blank" href="${feature.properties.url}">${feature.properties.url}</a>
      //   <br/>
      //   <code>${feature.properties.public_key}</code>
      // `,
      //   {
      //     maxWidth: 400,
      //   }
      // );
      layer.on({
        click: () => {
          document
            .getElementById("map")
            .dispatchEvent(new CustomEvent("map:click", { detail: feature }));
        },
      });
    },
    pointToLayer: (feature, latlng) => {
      if (feature.properties.active) {
        return L.circleMarker(latlng, {
          ...geojsonMarkerOptions,
          radius:
            geojsonMarkerOptions.radius *
            (feature.properties.upcoming_events > 0 ? 1 : 0.7),
          fillColor: COLORS[feature.properties.type],
          color: COLORS[feature.properties.type],
        });
      } else {
        return L.circleMarker(latlng, {
          ...geojsonMarkerOptions,
          radius: geojsonMarkerOptions.radius * 0.7,
          fillColor: COLORS.inactive,
          color: COLORS.inactive,
        });
      }
    },
  }).addTo(map);

  // Add routes
  // resp = await fetch(JunaCat.routesUrl);
  // let routes = await resp.json();
  // routes.forEach(route => {
  //   let startPoint = features.find(item => item.id === route.start.id);
  //   let endPoint = features.find(item => item.id === route.end.id);
  //   L.polyline(
  //     [
  //       [
  //         startPoint.geometry.coordinates[1],
  //         startPoint.geometry.coordinates[0],
  //       ],
  //       [endPoint.geometry.coordinates[1], endPoint.geometry.coordinates[0]],
  //     ],
  //     {
  //       color,
  //       weight: 3,
  //       opacity: 0.7,
  //     }
  //   )
  //     .addTo(map)
  //     .bindPopup(
  //       `Ruta: ${startPoint.properties.name} - ${endPoint.properties.name}
  //     <br/>Transport: ${route.transporter.name}`
  //     );
  // });

  var legend = L.control({ position: "topright" });

  legend.onAdd = function (map) {
    let div = L.DomUtil.create("div", "info legend"),
      elements = [
        ["M", "Mercat"],
        ["R", "Rebost"],
        ["P", "Punt de recollida"],
        ["I", "Punt d'intercanvi"],
        ["inactive", "Inactiu"],
      ];

    for (var [elem, label] of elements) {
      div.innerHTML += `
        <p style="padding: 2px">
        <i style="background-color: ${COLORS[elem]}">
        </i>
        ${label}
        </p>
      `;
    }

    return div;
  };

  legend.addTo(map);

  // Interactivity

  let mapElem = document.getElementById("map");
  mapElem.addEventListener("location:click", e => {
    let feature = JunaCat.features.find(f => f.id === e.detail.id);
    JunaCat.map.setView([...feature.geometry.coordinates].reverse(), 12, {
      animate: true,
    });
  });

  JunaCat.clickedLocation = locationId => {
    console.log("clicked location", locationId);
    document
      .getElementById("map")
      .dispatchEvent(
        new CustomEvent("location:click", { detail: { id: locationId } }),
      );
  };
}