// Init vars
var selectedFeature = null;
var ignApiKey = "5bpmx23o33rrqijtghaesf65";
var mapId = "map";
var selectedLayer = L.layerGroup();


// BASE LAYERS
     
        var OpenStreetMapGreySCale = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {alias : 'OpenStreetMapGreySCale', className: 'sysma-leaflet-tile-greyscale', maxNativeZoom: 19, maxZoom: 22, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'  }) ;
             
        var OpenStreetMap = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {alias : 'OpenStreetMap', maxNativeZoom: 19, maxZoom: 22, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'  }) ;
             
        var scan_express = new L.TileLayer("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&format=image/png&style=normal", {alias : 'scan_express', maxNativeZoom: 18, maxZoom: 22, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'  }) ;
                 
        var scan_25 = new L.tileLayer.wms("http://mapsref.brgm.fr/wxs/refcom-brgm/refign?LAYERS=FONDS_SCAN&TRANSPARENT=TRUE&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&STYLES=&FORMAT=image/png&SRS=EPSG:3857", {alias : 'scan_25', maxNativeZoom: 18, maxZoom: 22, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'  }) ;
             
        var scan_topo_ign_nb_brgm = new L.tileLayer.wms("http://mapsref.brgm.fr/wxs/refcom-brgm/refign?LAYERS=FONDS_SCAN&TRANSPARENT=TRUE&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&STYLES=&FORMAT=image/png&SRS=EPSG:3857", {alias : 'scan_topo_ign_nb_brgm', className: 'sysma-leaflet-tile-greyscale', maxNativeZoom: 18, maxZoom: 22, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'  }) ;
         
        var orthophotos = new L.TileLayer("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal", {alias : 'orthophotos', maxNativeZoom: 19, maxZoom: 22, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'  }) ;
             
        var orthophotosOpacity50 = new L.TileLayer("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal", {alias : 'orthophotosOpacity50', maxNativeZoom: 19, maxZoom: 22, opacity: 0.5, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'  }) ;
             
        var orthophotos_hr = new L.TileLayer("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=HR.ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal", {alias : 'orthophotos_hr', maxNativeZoom: 19, maxZoom: 22, attribution: '© <a href="https://www.ign.fr/">IGN</a>'  }) ;
             
        var orthophotos1950_1965 = new L.TileLayer("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS.1950-1965&format=image/png&style=normal", {alias : 'orthophotos1950_1965', maxNativeZoom: 18, maxZoom: 22, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'  }) ;
             
        var toner_lite = new L.TileLayer("https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png", {alias : 'toner_lite', maxNativeZoom: 18, maxZoom: 22, attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>'  }) ;
        
// OTHER BASE LAYERS
  
     
        var cadastre = new L.TileLayer("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=CADASTRALPARCELS.PARCELS&format=image/png&STYLE=bdparcellaire", {alias : 'cadastre', maxZoom: 22, attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>' }) ;
           
          
        var topage = new L.tileLayer.wms("https://services.sandre.eaufrance.fr/geo/topage", {alias : 'topage', layers:'CoursEau_FXX', transparent:true, format:'image/png', attribution: 'SANDRE' }) ;
      
          
        var carthage = new L.tileLayer.wms("https://services.sandre.eaufrance.fr/geo/eth", {alias : 'carthage', layers:'CoursEau_FXX,PlanEau_FXX', transparent:true, format:'image/png', attribution: 'SANDRE' }) ;
      
     
        var ppri2024_alea_crueref = new L.TileLayer("https://observatoire.sevre-nantaise.com/tiles/4326/ppri2024_alea_crueref/{z}/{x}/{y}.png", {alias : 'ppri2024_alea_crueref', maxNativeZoom: 17, maxZoom: 22, attribution: 'DDT(M)',opacity:0.8 }) ;
           
          
        var agri_bcae_latest = new L.tileLayer.wms("https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=HYDROGRAPHY.BCAE.LATEST&format=image/png&style=normal", {alias : 'agri_bcae_latest',  }) ;
    
var drawnItems = new L.FeatureGroup();



// LEAFLET MAP INIT
var map = L.map(mapId, {
    center: new L.LatLng(46.92987, -1.06945),
    zoom:10,
    zoomDelta: 0.25,
    zoomSnap: 0.25,
    maxZoom: 22,
    editable:true, 
    editOptions:{
        featuresLayer: drawnItems
    },
    layers: [OpenStreetMap, ]    
});





var baseLayers = {  "Open\u0020Street\u0020Map\u0020\u0028Gris\u0029":OpenStreetMapGreySCale,  "Open\u0020Street\u0020Map":OpenStreetMap,  "SCAN\u0020Express\u0020IGN":scan_express,  "Scan\u0020Topo\u0020IGN":scan_25,  "Scan\u0020Topo\u0020IGN\u0020\u0028Gris\u0029":scan_topo_ign_nb_brgm,  "OrthoPhotos\u0020\u0028dernier\u0020mill\u00E9sime\u0029":orthophotos,  "OrthoPhotos\u0020transparent\u0020\u0028dernier\u0020mill\u00E9sime\u0029":orthophotosOpacity50,  "OrthoPhotos\u0020HR\u0020\u0028dernier\u0020mill\u00E9sime\u0029":orthophotos_hr,  "OrthoPhotos\u0020\u00281950\u002D1965\u0029":orthophotos1950_1965,  "Toner\u0020lite\u0020\u0028gris\u0020simplifi\u00E9\u0029":toner_lite, } ;

var otherBaseLayers = {  "Cadastre":cadastre,  "Topage":topage,  "Carthage":carthage,  "PPRI2024\u0020Al\u00E9a\u0020pour\u0020la\u0020crue\u0020de\u0020r\u00E9f\u00E9rence":ppri2024_alea_crueref,  "Agri\u0020BCAE\u0020\u0028derniere\u0020version\u0029":agri_bcae_latest, } ;

// Layer control

L.control.layers(baseLayers, otherBaseLayers, {position: 'topleft'}).addTo(map);




// Scalbar
L.control.scale({'imperial':false, 'metric':true, 'position':'bottomright'}).addTo(map);

// Locate control
L.control.locate().addTo(map);


// DRAW

var sysmaGroup = new L.FeatureGroup();
map.addLayer(sysmaGroup);

map.addLayer(drawnItems);
drawnItems.bringToFront();




// other tools 
// SYSMA TOOL BOX /////////////////////////////////////////////////////////////////////

var sysmaToolBoxIsOpened = false ;
var selectionMode = false ;



L.Control.sysmaToolsButton = L.Control.extend({
    options: {
        position: 'topleft'
    },
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-sysma-toolbox-control');
        container.id = 'sysmaToolBox' ;
        var button = L.DomUtil.create('a', 'leaflet-control-button leaflet-sysma-toolbox-button', container);
        L.DomEvent.disableClickPropagation(button);
        L.DomEvent.on(container, 'click', function(){
            openCloseSysmaToolbox();           
        });

        container.title = "Sysma ToolBox";

        return container;
    },
    onRemove: function(map) {},
});


L.control.sysmaTools = function(opts) {
    return new L.Control.sysmaToolsButton(opts);
}

L.control.sysmaTools({ position: 'topleft' }).addTo(map);



function toggleSelectionMode() {
    setSelectionMode(!selectionMode)  
}


function setSelectionMode(onOff) {
    if (onOff) {
                selectionMode = true ;
                drawnItems.clearLayers();
                console.log('Selection mode On') ;
                enableDraw('ST_Polygon',null)
                $('.leaflet-selection-button').attr('style', 'background-color : #000 !important') ;
            } else {
                selectionMode = false ;
                map.editTools.stopDrawing() ; 
                console.log('Selection mode Off') ;
                $('.leaflet-selection-button').attr('style', 'background-color : #ccc !important') ;            
    }
}



function openCloseSysmaToolbox() {



// MEASURE CONTROL 

 if (sysmaToolBoxIsOpened == false) { 

    
    map.measureControl = new L.Control.Measure({ position:'topleft', primaryLengthUnit: 'meters', secondaryLengthUnit: undefined, primaryAreaUnit: 'hectares', secondaryAreaUnit : 'sqmeters', activeColor: '#ff0000', completedColor: '#FF3333', localization: 'fr' }) ;
    map.addControl(map.measureControl)

     } else {
        map.measureControl.remove() ;
    }


    // SEARCH Tool


    if (sysmaToolBoxIsOpened == false) { 

        map.searchBtn = new L.Control.Search({
            url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
            jsonpParam: 'json_callback',
            propertyName: 'display_name',
            propertyLoc: ['lat', 'lon'],
            markerLocation: true,
            autoCollapse: true,
            autoType: false,
            minLength: 2
        }) ;

         map.addControl(map.searchBtn);

    } else {
        map.searchBtn.remove() ;
    }
   
   // COORDS TOOL
    
    if (sysmaToolBoxIsOpened == false) {  
      
            coordBtnConstructor = L.Control.extend({
                options: {
                    position: 'topleft'
                },
                onAdd: function (map) {

                    map.coordBtn = this;
                    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-coord-control');
                    var button = L.DomUtil.create('a', 'leaflet-control-button leaflet-coord-button text-inactive', container);
                    button.id = 'iconCoord' ;
                    L.DomEvent.disableClickPropagation(container);
                    L.DomEvent.on(container, 'click', function(){
                        $('#iconCoord').toggleClass('text-inactive');                        
                        groupCoord.clearLayers();     
                        if (!$('#iconRpg').hasClass('text-inactive')) {
                            $('#iconRpg').toggleClass('text-inactive');
                        }
                        if (!$('#iconCad').hasClass('text-inactive')) {
                            $('#iconCad').toggleClass('text-inactive');
                        }    
                        setSelectionMode(false)  
                    });
                    container.title = "Afficher les coordonnées de la carte";
                    return container;
                },
                onRemove: function(map) {
                    groupCoord.clearLayers();                       
                },
            });            
            
            var coordBtn = new coordBtnConstructor() ;          
            coordBtn.addTo(map);
       
        }  else {
              
                if (map.coordBtn) {
                    console.log('Close Coord Tool') ;
                    map.coordBtn.remove() ;                    
                }             

        }


// SELECTION TOOL





 if (sysmaToolBoxIsOpened == false) {        

        selectionBtnConstructor = L.Control.extend({
            options: {
                position: 'topleft'
            },
        onAdd: function (map) {
            map.selectBtn = this;
            var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-selection-control');
            var button = L.DomUtil.create('a', 'leaflet-control-button leaflet-selection-button', container);            
            L.DomEvent.disableClickPropagation(button);
            L.DomEvent.on(container, 'click', function(){
                toggleSelectionMode();      
                if (!$('#iconCad').hasClass('text-inactive')) {
                    $('#iconCad').toggleClass('text-inactive');
                }
                if (!$('#iconRpg').hasClass('text-inactive')) {
                    $('#iconRpg').toggleClass('text-inactive');
                }
                if (!$('#iconCoord').hasClass('text-inactive')) {
                    $('#iconCoord').toggleClass('text-inactive');
                }
                     
            });

            container.title = "Zone de sélection";
            return container;
        },
        onRemove: function(map) {},
        });

            var selectBtn = new selectionBtnConstructor() ;          
            selectBtn.addTo(map);

    } else {
              
                if (map.selectBtn) {
                    console.log('Close Selection Tool') ;
                    map.selectBtn.remove() ;                    
                }             

        }




// RPG TOOL

      
        

        
		

        if (sysmaToolBoxIsOpened == false) {  

            console.log('Open Sysma Tool Box') ;
            sysmaToolBoxIsOpened = true ;  

        } else {

            console.log('Close Sysma Tool Box') ;
            sysmaToolBoxIsOpened = false ; 
        }

  
}


// Editable Events

function enableDraw(type,snapLayer) {

    selectedLayer.remove() ;
    selectedLayer.clearLayers() ;

    //console.log(snapLayer);
    if (snapLayer !== null) {

        var snap = new L.Handler.MarkerSnap(map, null, { snapDistance : 15 });    
        //console.log('snapping is on') ;
        //console.log(map._layers[snapLayer]) ;

        snap.addGuideLayer(map._layers[snapLayer]);
        var snapMarker = L.marker(map.getCenter(), {
            icon: map.editTools.createVertexIcon({className: 'leaflet-div-icon leaflet-drawing-icon'}),
            opacity: 1,
            zIndexOffset: 1000
        });

        snap.watchMarker(snapMarker);

        map.on('editable:vertex:dragstart', function (e) {
            snap.watchMarker(e.vertex);
        });
        map.on('editable:vertex:dragend', function (e) {
            snap.unwatchMarker(e.vertex);
        });
        map.on('editable:drawing:start', function () {
            this.on('mousemove', followMouse);
        });
        map.on('editable:drawing:end', function () {
            this.off('mousemove', followMouse);
            snapMarker.remove();
        });
        map.on('editable:drawing:cancel', function () {          
            snap.disable() ;
            this.off('mousemove', followMouse);
            snapMarker.remove();
        });
        map.on('editable:drawing:click', function (e) {
            // Leaflet copy event data to another object when firing,
            // so the event object we have here is not the one fired by
            // Leaflet.Editable; it's not a deep copy though, so we can change
            // the other objects that have a reference here.
            var latlng = snapMarker.getLatLng();
            e.latlng.lat = latlng.lat;
            e.latlng.lng = latlng.lng;
        });
        snapMarker.on('snap', function (e) {
            snapMarker.addTo(map);
        });
        snapMarker.on('unsnap', function (e) {
            snapMarker.remove();
        });
        var followMouse = function (e) {
            snapMarker.setLatLng(e.latlng);
        }
    }

    if (type === 'ST_Point') {
        map.editTools.startMarker();  
    } else if (type === 'ST_Linestring') {
        map.editTools.startPolyline();  
    } else if (type === 'ST_Polygon') {            
        map.editTools.startPolygon();  
    }
}

// tracking continue mode
var cont = 0 ;


map.on('editable:drawing:commit', function (e) {

    map.editTools.stopDrawing() ; 

    if (cont === 0) {
        //console.log(e) ;
        e.layer.editor.disable() ;

        layer = e.layer;
        var shape = layer.toGeoJSON();
        var shape_for_db = JSON.stringify(shape);

        var data = JSON.parse(shape_for_db);
        openClose('rightColumn', '60%', 'map', '100%');
        $('#infos').hide(150);
        $('#objet').show(150);

       
        if (selectionMode) {
                sendData('geom=' + data.geometry.coordinates + '&selectionMode='+selectionMode, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/selection\u002Dgeo', 'objet', null);
                setSelectionMode(false) ;
        } else {
             sendData('geom=' + data.geometry.coordinates + '&geometry_type=ST_Point', 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/objet\/create', 'objet', null);
        }

        //sendData(null, "https\u003A\/\/sysma.sevre\u002Dnantaise.com\/layermanager", "infos", event);
    } else {
        //console.log('commit with continue = true') ;
        cont = 0 ;
    }

});


// continue mode, Ctrl + click
map.on('editable:vertex:ctrlclick editable:vertex:metakeyclick', function (e) {
    cont = 1 ;
    e.vertex.continue();
});


// editable Ctrl Z
var Z = 90, latlng, redoBuffer = [],
onKeyDown = function (e) {
    if (e.keyCode == Z) {
        if (!this.editTools._drawingEditor) return;
        if (e.shiftKey) {
            if (redoBuffer.length) this.editTools._drawingEditor.push(redoBuffer.pop());
        } else {
            latlng = this.editTools._drawingEditor.pop();
            if (latlng) redoBuffer.push(latlng);
        }
    }
};
L.DomEvent.addListener(document, 'keydown', onKeyDown, map);

map.on('editable:drawing:end', function () {
    redoBuffer = [];
});






// Update user's center and zoom value on each pan and zoom

map.on('moveend', function (e) {
    //console.log('moveend') ;
    $('#center').val(map.getCenter()) ;
    $('#zoom').val(map.getZoom()) ;
    console.log(e);
        sendData('centre=' + String(map.getCenter()).replace(" ","") + '&zoom=' + map.getZoom(), 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/update\u002Dmap\u002Dsettings', 'layerstate', null, false);   


});
map.on('baselayerchange', function (e) {
    //console.log('baselayerchange') ;
    //console.log(e) ;
    //if (e.sourceTarget._popup === null) {
    sendData2('baselayer=' + e.layer.options.alias, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/update\u002Dbaselayer', 'layerstate', null);
    //}
});
map.on('overlayremove', function (e) {    
    //console.log('overlayremove') ;
    sendData2('action=remove&otherbaselayer=' + e.layer.options.alias, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/update\u002Dother\u002Dbaselayer', 'layerstate', null);
});
map.on('overlayadd', function (e) {
    //console.log('overlayadd') ;
    sendData2('action=add&otherbaselayer=' + e.layer.options.alias, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/update\u002Dother\u002Dbaselayer', 'layerstate', null);
});


// OnClick map events
var groupCad = L.layerGroup();
groupCad.addTo(map);
var groupRpg = L.layerGroup();
groupRpg.addTo(map);
var groupCoord = L.layerGroup();
groupCoord.addTo(map);
var selectedLayer = L.layerGroup();
selectedLayer.addTo(map);
var selectedItems = [] ;

map.on('dblclick', function (e) {

}) ;


map.on('click', function (e) {
    //console.log('click') ;
    // selected feature style reset
    selectedLayer.remove() ;
    selectedLayer.clearLayers() ;
    selectedItems = [] ;
    groupCad.clearLayers();

    //
    // map click coordinates infos
    if (!$('#iconCoord').hasClass('text-inactive') && $('#iconCoord').length>0) {
        groupCoord.clearLayers();
        var markerCoord = L.marker(e.latlng);
        groupCoord.addLayer(markerCoord);
        sendData('mouse=' + e.latlng, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/coords', 'objet', event, true);
        $('#infos').hide(150);
        $('#objet').show(150);
    }

    //
    // map click cadastre infos
    if (!$('#iconCad').hasClass('text-inactive') && $('#iconCad').length>0) {
        $('#infos').hide(150); $('#objet').show(150); openClose('rightColumn', '60%', 'map', '40%');
        sendData('mouse=' + e.latlng, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/infos\u002Dcadastre', 'objet', null);
    }


    // map click RPG infos
    if (!$('#iconRpg').hasClass('text-inactive') && $('#iconRpg').length>0) {
        $('#infos').hide(150); $('#objet').show(150); openClose('rightColumn', '60%', 'map', '40%');
        sendData('mouse=' + e.latlng, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/infos\u002Drpg', 'objet', null);
    }
});




    sendData(null, 'https\u003A\/\/sysma.sevre\u002Dnantaise.com\/layermanager', 'infos', null);