var OpenStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    subdomains:['mt0','mt1','mt2','mt3']
});

var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
	subdomains:['mt0','mt1','mt2','mt3']
});

var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
    subdomains:['mt0','mt1','mt2','mt3']
});

var map = L.map('map', {
	center: [0,0],
	zoom: 3,
	layers: [OpenStreetMap, googleSat, googleHybrid]
	});

var baseMaps = {
	"OSM": OpenStreetMap,
	"Satelite": googleSat,
	"Hybrid": googleHybrid
};

L.control.layers(baseMaps).addTo(map);
L.control.scale().addTo(map);

var MyApp;
new QWebChannel(qt.webChannelTransport, function (channel) 
{
    MyApp = channel.objects.MyApp;
});

map.on('mousemove', function(e)
{
	MyApp.onMapMove(e.latlng.lat, e.latlng.lng);

	const bounds = map.getBounds();
	MyApp.onMapZoom(bounds.getSouth(), bounds.getWest(), bounds.getNorth(), bounds.getEast(), map.getZoom());
});

var DrawShapes;
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
  draw:
  {
    position: 'topleft',
    polygon:
    {
      allowIntersection: false,
      drawError:
      {
        color: '#b00b00',
        message: '<strong>Polygon draw does not allow intersections!<strong> (allowIntersection: false)',
        timeout: 1000
      },
      shapeOptions:
      {
        color: '#bada55'
      },
      showArea: true
    },

    circle: {
      shapeOptions: {
        color: '#662d91'
      }
    },

	circle:true,
	circlemarker:false,
    polyline: true,
    rectangle: true,
    marker: true,
  },

  edit: {
    featureGroup: drawnItems
  }
});
map.addControl(drawControl);

map.on('draw:created', function(e)
{
  var type = e.layerType;
  var layer = e.layer;
  var feature = layer.feature = layer.feature || {};
  feature.type = feature.type || "Feature";
  var props = feature.properties = feature.properties || {};
  var geoJSON = layer.toGeoJSON();

  if (type === 'marker')
  {
    geoJSON.properties.name = "Circle";
    geoJSON.properties.geo = false;
    addPopup(layer);
  }
  else if (type === "circle")
  {
    var radius = layer.getRadius();
    geoJSON.properties.name = "Circle";
    geoJSON.properties.radius = radius;
    geoJSON.properties.geo = true;
    addPopup(layer);
  }
  else
  {
    geoJSON.properties.name = "Area";
    geoJSON.properties.Prohibited = false;
    addPopup(layer);
  }

  drawnItems.addLayer(layer);
});

function addPopup(layer)
{
  var content = createCustomElementFromProperties(layer.feature.properties);
  content.addEventListener("keyup", function ()
  {
    layer.feature.properties = RetrieveObjFromCustomElement(content);
  });
  layer.on("popupopen", function ()
  {
    content = FillCustomElementFromProperties(layer.feature.properties, content);
    content.focus();
  });
  layer.bindPopup(content).openPopup();
}

function createCustomElementFromProperties(properties)
{
  var content = document.createElement("div");
  for(var property in properties)
  {
    var part = document.createElement("div");
    content.appendChild(part)
    var label = document.createElement('label')
    label.htmlFor = "id";
    label.appendChild(document.createTextNode('Etiqueta: '));

    var tmpnode = document.createElement("input")
    if (typeof properties[property] == "boolean")
       tmpnode.type = "checkbox"
       tmpnode.value = properties[property]

    tmpnode.value = properties[property]
    tmpnode.j_type = property
    part.appendChild(tmpnode)
    part.appendChild(label)
  }
  return content
}

function RetrieveObjFromCustomElement(custom_element)
{
  var tmpobj = {};
  for(var i = 0; i < custom_element.childNodes.length; i++)
  {
    var j_type = custom_element.childNodes[i].j_type
    tmpobj[j_type] = custom_element.childNodes[i].value
  }
  return tmpobj
}

function FillCustomElementFromProperties(tmpobject, custom_element)
{
  for(var i = 0; i < custom_element.childNodes.length; i++)
  {
    var j_type = custom_element.childNodes[i].j_type
    custom_element.childNodes[i].value = tmpobject[j_type]
  }
	return custom_element
}

// create a red polygon from an array of LatLng points
/*var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'});
drawnItems.addLayer(polygon);
var latlngs = [[37, -109.05],[41, -102.05]];
var polygon = L.rectangle(latlngs, {color: 'red'});
drawnItems.addLayer(polygon);
map.fitBounds(polygon.getBounds());*/