import { aq, op } from '@uwdata/arquero' // le dplyr ou pandas du javascript

L = globalThis.L

viewof mySite = Inputs.input()

// on a récupéré des string, il faut les parser...
communes = JSON.parse(communesString)
sites = JSON.parse(sitesString)
sites_mask = JSON.parse(sites_maskString)

/*sitesFiltered = bertin.properties.filter({
  geojson: sites,
  expression: `sites_olymp == '${sites_olymp}'`
})*/

// Ici on fabrique notre geoJSON filtré avec les viewof
sitesFiltered = {return {
  type: "FeatureCollection",
  features: sites.features.filter(feature => 
      sites_olymp.includes(feature.properties.sites_olymp)
      && suivi.includes(feature.properties["Suivi"])
  )
}};

//sitesFiltered

osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors"
});

ortho = L.tileLayer("https://data.geopf.fr/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}", {
    attribution: "© IGN",
    tileSize: 256,
    maxZoom: 19
});

_communes = L.geoJSON(communes,{
  style: {
    color: "purple",
    weight: 2,
    fillOpacity: 0
  }
});//.addTo(map);
_sites = L.geoJSON(sites, {
      onEachFeature: function (feature, layer) {
          layer.bindPopup(`
                          <strong>${feature.properties.nom}</strong><br>
                          ${feature.properties.sites_olymp||''}<br>
                          ${feature.properties.sports}<br>
                          `);
      }
    });//.addTo(map);

/*_sites.on('click', function(e) {
    mutable mySite = e.layer.feature.properties;
    // console.log('ID cliqué :', e.layer.feature.properties);
});*/

// Quand on clique sur un site, on modifie la valeur du viewof et on propage l'info
/*_sites.on('click', function(e) {
    //mutable mySite = e.layer.feature.properties;
    //alert(e.layer.feature.properties.fid);
    viewof mySite.value = e.layer.feature.properties;
    viewof mySite.dispatchEvent(new Event("input", {bubbles: true}));
    // console.log('ID cliqué :', e.layer.feature.properties);
});
*/
// Création d'un viewof et bind à notre variable réactive
viewof clickMap = {
  // Création d'un div pour afficher les informations
  const element = html`<div>Cliquer sur un site pour voir les informations ici</div>`;
  // Valeur initiale
  element.value = null;
  // Ajout de l'événement de clic sur la couche Leaflet
  _sites.on('click', function(e) {
    // Met à jour la valeur de viewof
    element.value = e.layer.feature.properties;
    element.dispatchEvent(new Event("input", {bubbles: true}));

    // Mise à jour du contenu visuel du div
    //div.textContent = `${JSON.stringify(div.value)}`;
  });
  // Retourne le div comme élément DOM
  return element;
}
Inputs.bind(viewof clickMap, viewof mySite)

_markers = L.markerClusterGroup();
_markers.addLayer(_sites);

// bloc pour faire vivre la couche des sites en fonction des actions utilisateurs
// Vérifie si _sites existe déjà, si oui, on vide les markers et on met les nouveaux du geJSON filtrés
{
  if (_sites) {
    _sites.clearLayers(); // Vide tous les marqueurs de la couche existante
    _sites.addData(sitesFiltered); // Ajoute les nouvelles données
    _markers.clearLayers();
    _markers.addLayer(_sites);
  }
}