/* eslint-disable @typescript-eslint/no-floating-promises */
/* eslint-disable no-undef */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
async function imagesMapShowImg(document, dataNodeId, imageIndex) {
  const images = document.querySelectorAll(
    '#span-imag_' + dataNodeId + ' .span-img-hide',
  );
  if (0 > imageIndex) {
    imageIndex = images.length - 1;
  }
  if (imageIndex >= images.length) {
    imageIndex = 0;
  }
  document
    .querySelector('#cardImgGal' + dataNodeId)
    .setAttribute('data-imagesMap-modalIndex', '' + imageIndex);
  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .card-title-text',
  ).innerHTML = images[imageIndex].getAttribute('data-imagesMap-modalTitle');
  document.querySelector('#cardImgGal' + dataNodeId + ' .imgFullScreen').style[
    'background-image'
  ] = images[imageIndex].getAttribute('data-imagesMap-imgBackground');

  const hasPosition = document.querySelector(
    `#image_${dataNodeId}_${imageIndex}`,
  )._popup;
  if (hasPosition) {
    document
      .querySelector('#cardImgGal' + dataNodeId + ' .switch-map-image')
      .classList.remove('d-none');
  } else {
    document
      .querySelector('#cardImgGal' + dataNodeId + ' .switch-map-image')
      .classList.add('d-none');
  }

  if (
    !hasPosition ||
    document
      .querySelector('#cardImgGal' + dataNodeId + ' .mapFullScreen')
      .classList.contains('card-text-hidden')
  ) {
    imagesMapShowImage(document, dataNodeId);
  } else {
    imagesMapShowMap(document, dataNodeId);
  }
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function imagesMapShowMap(document, dataNodeId) {
  document
    .querySelector('#cardImgGal' + dataNodeId + ' .mapFullScreen')
    .classList.remove('card-text-hidden');
  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .show-map',
  ).disabled = true;
  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .show-image',
  ).disabled = false;
  document.querySelector('#cardImgGal' + dataNodeId)._map.invalidateSize();

  const popup = document.querySelector(
    `#image_${dataNodeId}_${document
      .querySelector('#cardImgGal' + dataNodeId)
      .getAttribute('data-imagesMap-modalIndex')}`,
  )._popup;
  const map = document.querySelector('#cardImgGal' + dataNodeId)._map;
  if (popup) {
    map.setView(popup.getLatLng());
    map.openPopup(popup);
  }
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function imagesMapShowImage(document, dataNodeId) {
  document
    .querySelector('#cardImgGal' + dataNodeId + ' .mapFullScreen')
    .classList.add('card-text-hidden');
  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .show-map',
  ).disabled = false;
  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .show-image',
  ).disabled = true;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
async function displayImagesMap(document, dataNodeId, display) {
  const id = 'map_' + dataNodeId;
  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');

  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 bounds = [];
  const markers = L.markerClusterGroup();
  for (const position of display.positions) {
    const marker = L.marker(position.position, {
      icon: L.icon({
        iconUrl: position.src,
        iconSize: [36, 36],
        iconAnchor: [18, 18],
      }),
    });
    const popup = L.popup().setLatLng(position.position).setContent(`
    <a onclick="imagesMapShowImage(document, '${dataNodeId}');imagesMapShowImg(document, '${dataNodeId}', ${position.index})">
     <img src="${position.src}">
     </a>
   `);
    marker.bindPopup(popup);

    document.querySelector(
      `#image_${dataNodeId}_${position.index}`,
    )._popup = popup;

    markers.addLayer(marker);
    bounds.push(position.position);
  }

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

  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .show-map',
  ).disabled = true;
  document.querySelector(
    '#cardImgGal' + dataNodeId + ' .show-image',
  ).disabled = true;

  return map;
}
