/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-floating-promises */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
async function displayCommonMap(id, display, loadPositionPopup) {
  loadStyle('/popup/popup.css');
  loadStyle('/leaflet/leaflet.css');
  await loadScript('/leaflet/leaflet.js');

  loadStyle('/markercluster/MarkerCluster.css');
  loadStyle('/markercluster/MarkerCluster.Default.css');
  await loadScript('/markercluster/leaflet.markercluster.js');

  await loadScript('/layersupport/leaflet.markercluster.layersupport.js');

  return new Promise((resolve) => {
    window.setTimeout(() => {
      const map = L.map(id).setView([51.505, -0.09], 13);

      const osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        // LIGNE 20
        attribution: '© OpenStreetMap contributors',
        maxZoom: 19,
      });

      map.addLayer(osmLayer);

      const icons = {};
      const bounds = [];
      //const markers = L.markerClusterGroup();

      const mcgLayerSupportGroup = L.markerClusterGroup.layerSupport();
      mcgLayerSupportGroup.addTo(map);

      const layerGroups = {};

      for (const position of display.positions) {
        if (!position.icon && !position.src) {
          position.icon = 'fas fa-splotch';
        }
        if (position.icon && !(position.icon in icons)) {
          icons[position.icon] = L.divIcon({
            className: position.icon + ' fa-3x',
            iconSize: [36, 36],
            iconAnchor: [18, 18],
          });
        }

        const marker = L.marker(position.position, {
          icon: position.icon
            ? icons[position.icon]
            : L.icon({
                iconUrl: position.src,
                iconSize: [36, 36],
                iconAnchor: [18, 18],
              }),
        });
        if (loadPositionPopup) {
          try {
            (async function () {
              const popup = loadPositionPopup
                ? await loadPositionPopup(position)
                : undefined;
              if (popup) {
                marker.bindPopup(popup, {className: 'map-popup'});
              }
            })();
          } catch (error) {}
        }

        //markers.addLayer(marker);
        position.layer = position.layer ? position.layer : 'default';

        if (!(position.layer in layerGroups)) {
          layerGroups[position.layer] = L.layerGroup();
        }
        marker.addTo(layerGroups[position.layer]);

        bounds.push(position.position);
      }

      //map.addLayer(markers);

      mcgLayerSupportGroup.checkIn(Object.values(layerGroups));

      if (1 < Object.keys(layerGroups).length) {
        const control = L.control.layers(null, null, {collapsed: false});
        for (layer in layerGroups) {
          control.addOverlay(layerGroups[layer], layer);
        }
        control.addTo(map);
      }

      Object.values(layerGroups).forEach((group) => {
        group.addTo(map); // Adding to map or to AutoMCG are now equivalent.
      });

      if (0 < bounds.length) {
        map.fitBounds(bounds, {maxZoom: 15, padding: [40, 40]});
      }

      resolve(map);
    });
  });
}
