// à étudier pour un switch layer
// https://geotribu.fr/articles/2021/2021-02-23_carte_ligne_libre/
// doc IGN pas tellement détaillée...
//https://geoservices.ign.fr/documentation/services/services-geoplateforme/diffusion#70062
// pour consulter une metadonnée https://data.geopf.fr/tms/1.0.0/ELEVATION.ELEVATIONGRIDCOVERAGE/metadata.json
// https://data.geopf.fr/wms-r/wmts?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities
// un programme par un gars de l'IGN qui a tout compris...
// https://github.com/IGNF/openlayers-vs-maplibre/blob/main/assets/js/components/maplibre/maplibre-ext.js
// des exemples !
// https://sites-formations.univ-rennes2.fr/mastersigat/MaplibreGL/
// exemple france par maptiler
// https://www.maptiler.com/news/2022/05/maplibre-v2-add-3d-terrain-to-your-map/
// ma clef avec mon compte google : qui est dans le fichier d'environnement 

// TODO
// gérer proprement pour pas avoir deux fonds différents l'un par dessus l'autre mais bien un choix
// un menu pour switcher les layers et les fonds
// à étudier :
// https://github.com/watergis/maplibre-gl-legend
// Un graphe en apache echart qui dépend de la sélection

myMap = {

  // on définit le container de la carte et on l'attend  , on mettant fill: false la card prend la taille de la map et en réglant le height en vh en tatonnant on trouve la bonne proportion, cf custom.css
  //const container = html`<div style="height:55vh;">`;
  const container = html`<div class="map-container"></div>`;
  yield container;

    // add the PMTiles plugin to the maplibregl global.
    const protocol = new pmtiles.Protocol();
    maplibregl.addProtocol('pmtiles', (request) => {
        return new Promise((resolve, reject) => {
            const callback = (err, data) => {
                if (err) {
                    reject(err);
                } else {
                    resolve({data});
                }
            };
            protocol.tile(request, callback);
        });
    });
    //const PMTILES_URL_B1 = 'https://guillaumechretiencerema.github.io/mydatas/recoquartiers/bat_48_58.pmtiles?raw=true';
    //const PMTILES_URL_B1 = 'http://162.19.124.68/recoquartiers/0-pmtiles/bat_48_58.pmtiles';
    const PMTILES_URL_B1 = `${LAYERS_PATH}/batiment_bdnb_48_58_corrige_pour_map.pmtiles`;
    const b1 = new pmtiles.PMTiles(PMTILES_URL_B1);
    // this is so we share one instance across the JS code and the map renderer
    protocol.add(b1);

    const PMTILES_URL_BBIS =`${LAYERS_PATH}/bat_hors48_58.pmtiles`;
    const bbis = new pmtiles.PMTiles(PMTILES_URL_BBIS);
    protocol.add(bbis);

    const PMTILES_URL_C =`${LAYERS_PATH}/communes.pmtiles`;
    const c = new pmtiles.PMTiles(PMTILES_URL_C);
    protocol.add(c);

    const PMTILES_URL_Q =`${LAYERS_PATH}/quartiers.pmtiles`;
    const q = new pmtiles.PMTiles(PMTILES_URL_Q);
    protocol.add(q);

    const PMTILES_URL_P =`${LAYERS_PATH}/parcelle_48_58.pmtiles`;
    const p = new pmtiles.PMTiles(PMTILES_URL_P);
    protocol.add(p);

    const sourceOrtho = {style:'normal', format:'image/jpeg',layer:'HR.ORTHOIMAGERY.ORTHOPHOTOS'};
    const sourcePlanIGN = {style:'normal', format:'image/png',layer:'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2'};
    const sourceHillShade = {style:'estompage_grayscale',format:'image/png',layer:'ELEVATION.ELEVATIONGRIDCOVERAGE.SHADOW'};

  const map = new maplibregl.Map({
    container,
    center: [0.1920, 49.2381],
            zoom: 7,
            pitch: 30,
            //maxPitch: 75,
            style: {
                version: 8,
                sources: {
                    'raster-planign': {
                        type: 'raster',
                        //'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                        tiles: [
                           `https://data.geopf.fr/wmts?SERVICE=WMTS&style=${sourcePlanIGN.style}&VERSION=1.0.0&REQUEST=GetTile&format=${sourcePlanIGN.format}&layer=${sourcePlanIGN.layer}&tilematrixset=PM&TileMatrix={z}&TileCol={x}&TileRow={y}`
                        ],
                        tileSize: 256,
                        attribution: '© <a href="https://www.ign.fr/">IGN</a>',
                        minzoom: 0,
                        maxzoom: 22
                    },
                    'raster-ortho': {
                        type: 'raster',
                        //'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                        tiles: [
                            `https://data.geopf.fr/wmts?SERVICE=WMTS&style=${sourceOrtho.style}&VERSION=1.0.0&REQUEST=GetTile&format=${sourceOrtho.format}&layer=${sourceOrtho.layer}&tilematrixset=PM&TileMatrix={z}&TileCol={x}&TileRow={y}`
                        ],
                        tileSize: 256,
                        attribution: '© <a href="https://www.ign.fr/">IGN</a>',
                        minzoom: 0,
                        maxzoom: 22
                    },
                    'hillshadeSource': {
                        type: 'raster',
                        //'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                        tiles: [
                            `https://data.geopf.fr/wmts?SERVICE=WMTS&style=${sourceHillShade.style}&VERSION=1.0.0&REQUEST=GetTile&format=${sourceHillShade.format}&layer=${sourceHillShade.layer}&tilematrixset=PM&TileMatrix={z}&TileCol={x}&TileRow={y}`
                        ],
                        tileSize: 256,
                        attribution: '© <a href="https://www.ign.fr/">IGN</a>',
                        minzoom: 0,
                        maxzoom: 22
                    },
                    'source_c': {
                        type: 'vector',
                        url: `pmtiles://${PMTILES_URL_C}`
                    },
                    'source_q': {
                        type: 'vector',
                        url: `pmtiles://${PMTILES_URL_Q}`,
                        attribution: '© <a href="https://www.cerema.fr/fr">CEREMA</a>',
                    },
                    'source_b1': {
                        type: 'vector',
                        url: `pmtiles://${PMTILES_URL_B1}`
                    },
                    'source_bbis': {
                        type: 'vector',
                        url: `pmtiles://${PMTILES_URL_BBIS}`
                    },
                    'source_p': {
                        type: 'vector',
                        url: `pmtiles://${PMTILES_URL_P}`
                    },
                },
                layers: [ 
                    {
                        id: 'raster-planign',
                        type: 'raster',
                        source: 'raster-planign',
                        layout: {
                            // Make the layer visible by default.
                            visibility: 'visible' //ou none
                        },
                    },    
                    {
                        id: 'raster-ortho',
                        type: 'raster',
                        source: 'raster-ortho',
                        layout: {
                            // Make the layer visible by default.
                            visibility: 'none' //ou none
                        },
                    },
                    {
                        id: 'hillshadeSource',
                        type: 'raster',
                        source: 'hillshadeSource',
                        layout: {
                            // Make the layer visible by default.
                            visibility: 'visible' //ou none
                        },
                    },
                    {
                        id: "communes",
                        source: "source_c",
                        'source-layer': "communes",
                        type: "line", 
                        paint: {
                            'line-color': '#e619e5',
                            'line-width': 2
                        }
                    },
                    {
                        id: "quartiers",
                        source: "source_q",
                        'source-layer': 'quartiers',
                        type: "fill", 
                        paint: {
                            //"fill-color": "green", 
                            'fill-color': [
                                'match',
                                ['get', 'clust_bis'], // Récupère la valeur de l'attribut 'clust_bis'
                                '1bis', '#ffff75', 
                                '2bis', '#ff3c6a', 
                                '3bis', '#914cd6',
                                '4bis', '#56cd62',
                                '5bis', '#6bf2ee',
                                '6bis', '#2e77d6',
                                '7bis', '#ffae21',

                                // Définissez une couleur par défaut si nécessaire :
                                '#808080' // Couleur grise par défaut pour les valeurs non spécifiées
                            ],
                            "fill-opacity": 0.5//,
                            //'fill-outline-color': '#000000'       
                        }
                    },
                    {
                        id: "quartier_line",
                        source: "source_q",
                        'source-layer': 'quartiers',
                        type: "line", 
                        paint: {
                            'line-color': "black",
                            'line-width': 2
                        }
                    },
                    { 
                        id: "selectedQ",
                        source: "source_q",
                        'source-layer': 'quartiers',
                        type: "line",
                        layout: {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        paint: {
                            "line-color": "yellow",
                            "line-width": 8
                        },
                        filter: ["==", "id", 225] // Filtre initial vide
                    },
                    {
                        id: "parcelle_48_58",
                        source: "source_p",
                        'source-layer': 'parcelle_48_58',
                        type: "line", 
                        paint: {
                            'line-color': "pink",
                            'line-width': 2
                        }
                    },
                    {
                        id: 'batiment_bdnb_48_58_corrige_pour_map',
                        source: 'source_b1',
                        'source-layer': 'batiment_bdnb_48_58_corrige_pour_map',
                        type: "fill-extrusion", // Changer le type de couche en "fill-extrusion"
                        paint: {                            
                            "fill-extrusion-color": "#fdb8ff", // Couleur de remplissage extrudée
                            "fill-extrusion-height": ["get", "bdtopo_bat_hauteur_mean"], // Propriété de hauteur à utiliser pour extruder les polygones
                            "fill-extrusion-base": 0, // Hauteur de base de l'extrusion
                            "fill-extrusion-opacity": 0.7
                        }
                    },
                    {
                        id: "batiment_bdnb_recoq_hors48_58_hors_parcelle_48_58",
                        source: 'source_bbis',
                        'source-layer': "batiment_bdnb_recoq_hors48_58_hors_parcelle_48_58",
                        type: "fill-extrusion", // Changer le type de couche en "fill-extrusion"
                        paint: {                            
                            "fill-extrusion-color": "white", // Couleur de remplissage extrudée
                            "fill-extrusion-height": ["get", "bdtopo_bat_hauteur_mean"], // Propriété de hauteur à utiliser pour extruder les polygones
                            "fill-extrusion-base": 0, // Hauteur de base de l'extrusion
                            "fill-extrusion-opacity": 0.7
                        }
                    }
                ]
            }
  });

  //------------------------------------------------------------------------------------------------      
  map.addControl(new maplibregl.NavigationControl(
    {
      visualizePitch: true,
      //showZoom: true,
      //showCompass: true
    }), 
    'top-left'
  );
  
  map.addControl(new maplibregl.FullscreenControl()), 'top-right';

  const scale = new maplibregl.ScaleControl({
    maxWidth: 80,
    unit: 'metric'
  });
  map.addControl(scale);


  //------------------------------------------------------------------------------------------------      
  map.on('click', 'quartiers', (e) => {
    // Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
    const centroid = turf.centroid(e.features[0].geometry);
    map.flyTo({
        center: centroid.geometry.coordinates,
        zoom: 15,
        pitch: 45
    });
    
    // POP UP on click
    new maplibregl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(`
          Quartier n° ${e.features[0].properties.id}<br>
          Commune: ${e.features[0].properties.nom_com_rattacht}<br>
          ${e.features[0].properties.nb_batiment_reco} bâtiments, 
          ${e.features[0].properties.somme_nlogh_reco} logements de la Reconstruction<br>
          Typologie de quartier : ${e.features[0].properties.lib_clust_bis} 
        `)
        .addTo(map);
        
    mutable myId = e.features[0].properties.id;
    
    // test highlight NEW !
    // Mettre à jour le filtre de la couche de surbrillance pour montrer uniquement l'élément cliqué
    map.setFilter('selectedQ', ['==', 'id', e.features[0].properties.id]);
    
  });
  
  const mySelectCommune = document.getElementById('mySelectCommune');
  mySelectCommune.addEventListener('change', () => {
      map.fitBounds( JSON.parse(mySelectCommune.value) );
  });
  
  //------------------------------------------------------------------------------------------------      
  // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
  map.on('mouseenter', 'quartiers', () => {
      map.getCanvas().style.cursor = 'pointer';
  });

  // Change it back to a pointer when it leaves.
  map.on('mouseleave', 'quartiers', () => {
      map.getCanvas().style.cursor = '';
  });

  //------------------------------------------------------------------------------------------------      
  // pris sur un exemple, permet de refaire un coup de propre
  invalidation.then(() => map.remove());
  
  //------------------------------------------------------------------------------------------------
  // TEST API ADRESSE GOUV FR cf header pour les lib css et js et exemple pris sur
  // https://github.com/webgeodatavore/photon-geocoder-autocomplete/blob/master/demo/photon-demo-maplibre.js
  function AddDomControl(dom) {
    this._dom = dom;
  }
  
  AddDomControl.prototype.onAdd = function (map) {
    this._map = map;
    this._container = document.createElement("div");
    this._container.className = "maplibregl-ctrl photon-geocoder-autocomplete";
    this._container.appendChild(this._dom);
    return this._container;
  };
  
  AddDomControl.prototype.onRemove = function () {
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
  };
  
  // Format result in the search input autocomplete
  var formatResult = function (feature, el) {
    var title = document.createElement("strong");
    el.appendChild(title);
    var detailsContainer = document.createElement("small");
    el.appendChild(detailsContainer);
    var details = [];
    title.innerHTML = feature.properties.label || feature.properties.name;
    var types = {
      housenumber: "numéro",
      street: "rue",
      locality: "lieu-dit",
      municipality: "commune",
    };
    if (types[feature.properties.type]) {
      var spanType = document.createElement("span");
      spanType.className = "type";
      title.appendChild(spanType);
      spanType.innerHTML = types[feature.properties.type];
    }
    if (
      feature.properties.city &&
      feature.properties.city !== feature.properties.name
    ) {
      details.push(feature.properties.city);
    }
    if (feature.properties.context) {
      details.push(feature.properties.context);
    }
    detailsContainer.innerHTML = details.join(", ");
  };
  
  // Function to show you can do something with the returned elements
  function myHandler(featureCollection) {
    console.log(featureCollection);
  }
  
  // We reused the default function to center and zoom on selected feature.
  // You can make your own. For instance, you could center, zoom
  // and add a point on the map
  function onSelected(feature) {
    console.log(feature);
    map.setCenter(feature.geometry.coordinates);
    map.setZoom(16);
  }
  
  // URL for API
  var API_URL = "//api-adresse.data.gouv.fr";
  
  // Create search by adresses component
  var searchCcontainer = new Photon.Search({
    resultsHandler: myHandler,
    onSelected: onSelected,
    placeholder: "Tapez une adresse",
    formatResult: formatResult,
    url: API_URL + "/search/?",
    feedbackEmail: null,
  });
  
  map.addControl(new AddDomControl(searchCcontainer), "bottom-left");
  
  //------------------------------------------------------------------------------------------------
            // Ebauche de menu sur mesure

            const mapMenuDiv = document.createElement('div');
            mapMenuDiv.classList.add('mapFondDePlan');
            //mapMenuDiv.innerHTML = '<strong>Fond de plan :</strong>';
            map.getContainer().appendChild(mapMenuDiv);
            // Ajouter un style pour le z-index

            mapMenuDiv.style.position = 'absolute'; // new
            mapMenuDiv.style.zIndex = '1000'; // new

            /*const customDivHTML = `
              <div>
                  <label for="orthoCheckbox">Orthophoto</label>
                  <input type="checkbox" id="orthoCheckbox" unchecked>
              </div>
            `;*/
            const customDivHTML = `
                    <strong>Fond de plan :</strong>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="orthoCheckbox">
                        <label class="form-check-label" for="orthoCheckbox">Photos aériennes</label>
                    </div>                    
                `;
            mapMenuDiv.innerHTML += customDivHTML;

            // doc à creuser
            // https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/
            document.getElementById('orthoCheckbox').addEventListener('change', function (e) {
                e.preventDefault();
                e.stopPropagation();

                const valeurCheckbox = document.getElementById('orthoCheckbox').checked;
                if (valeurCheckbox) {
                    map.setLayoutProperty('raster-ortho', 'visibility', 'visible');
                    map.setLayoutProperty('raster-planign', 'visibility', 'none');
                } else {
                    map.setLayoutProperty('raster-ortho', 'visibility', 'none');
                    map.setLayoutProperty('raster-planign', 'visibility', 'visible');
                }
            });

            // Brouillon pour ajouter mon menu layer !
            const mapLayersDiv = document.createElement('div');
            mapLayersDiv.classList.add('mapLayers');
            //mapMenuDiv.innerHTML = '<strong>Fond de plan :</strong>';
            map.getContainer().appendChild(mapLayersDiv);
            // Ajouter un style pour le z-index

            mapLayersDiv.style.position = 'absolute'; // new
            mapLayersDiv.style.zIndex = '1000'; // new
            const customDivHTML_2 = `
                    <button id="toggleMapMenuButton" class="btn btn-light">
                        <img src="images/icons/layers-half.svg" alt="Icône SVG" width="25" height="25">
                    </button>                    
                    <div id="layersList" ></div>
                    `
            mapLayersDiv.innerHTML += customDivHTML_2;

            const toggleableLayerIds= [
                "communes",
                "quartiers",
                "quartier_line",
                "parcelle_48_58",
                "batiment_bdnb_48_58_corrige_pour_map",
                "batiment_bdnb_recoq_hors48_58_hors_parcelle_48_58"];

            const aliasLayerIds = {
                "communes":"Communes",
                "quartiers":"RecoQuartiers",
                "quartier_line":"Contours",
                "parcelle_48_58":"Parcelles reco",
                "batiment_bdnb_48_58_corrige_pour_map":"Bâtis reco",
                "batiment_bdnb_recoq_hors48_58_hors_parcelle_48_58":"Bâtis non reco"
            };

            // https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/
            // Set up the corresponding toggle button for each layer.                
            for (const id of toggleableLayerIds) {
                // Skip layers that already have a button set up.
                if (document.getElementById(id)) {
                    continue;
                }

                // Create a link.
                const link = document.createElement('a');
                link.id = id;
                link.href = '#';
                //link.textContent = id;
                link.textContent = aliasLayerIds[id] || id;
                link.className = 'active';

                // Show or hide layer when the toggle is clicked.
                link.onclick = function (e) {
                    const clickedLayer = this.id;
                    e.preventDefault();
                    e.stopPropagation();

                    const visibility = map.getLayoutProperty(
                        clickedLayer,
                        'visibility'
                    ) || 'visible';
                    // NB : je rajoute ou visible car la première c'est undefined ? ? ?
                    // Toggle layer visibility by changing the layout object's visibility property.
                    if (visibility === 'visible') {
                        map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                        this.className = '';
                    } else {
                        this.className = 'active';
                        map.setLayoutProperty(
                            clickedLayer,
                            'visibility',
                            'visible'
                        );
                    }
                };

                const layers = document.getElementById('layersList');
                layers.appendChild(link);
            }
 
}