/*
 * L.Maidenhead displays a Maidenhead Locator of lines on the map.
 */

L.Maidenhead = L.LayerGroup.extend({

	options: {
		linecolor: isDarkModeTheme() ?  'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.3)',
		color: isDarkModeTheme() ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',

		workedColor: user_map_custom?.qso?.color
			? hexToRgba(user_map_custom.qso.color, 0.5)
			: 'rgba(229, 165, 10, 0.5)',

		confirmedColor: user_map_custom?.qsoconfirm?.color
			? hexToRgba(user_map_custom.qsoconfirm.color, 0.5)
			: 'rgba(144,238,144, 0.5)',

		redraw: 'move'
	},

	initialize: function (options) {
		L.LayerGroup.prototype.initialize.call(this);
		L.Util.setOptions(this, options);
	},

	onAdd: function (map) {
		this._map = map;
		var grid = this.redraw();
		// Store the event handler function so we can remove it later
		this._onViewChange = function () {
			grid.redraw();
		};
		this._map.on('viewreset '+ this.options.redraw, this._onViewChange);

		this.eachLayer(map.addLayer, map);
	},

	onRemove: function (map) {
		// remove layer listeners and elements
		if (this._onViewChange) {
			map.off('viewreset '+ this.options.redraw, this._onViewChange);
		}
		this.eachLayer(this.removeLayer, this);
	},

	redraw: function () {
		var d3 = new Array(20, 10, 10, 1, 1, 1, 1, 1, 1, 1, 1 / 24, 1 / 24, 1 / 24, 1 / 24, 1 / 24, 1 / 240, 1 / 240, 1 / 240, 1 / 240, 1 / 240 / 24, 1 / 240 / 24);
		var lat_cor = new Array(0, 8, 8, 8, 2.5, 2.2, 6, 8, 8, 8, 1.4, 2.5, 3, 3.5, 4, 4, 3.5, 3.5, 3, 1.8, 1.6); // Used for gridsquare text offset
		var bounds = map.getBounds();
		var zoom = map.getZoom();
		var unit = d3[zoom];
		var lcor = lat_cor[zoom];
		var w = bounds.getWest();
		var e = bounds.getEast();
		var n = bounds.getNorth();
		var s = bounds.getSouth();
		var field_lat_cor = new Array(0, 8, 8, 9, 8, 7, 6, 8, 8, 8, 1.4, 2.5, 3, 3.5, 4, 4, 3.5, 3.5, 3, 1.8, 1.6); // Used for field text offset
		var field_cor = field_lat_cor[zoom];
		if (zoom==1) {var c = 2;} else {var c = 0.2;} // Height offset
		if (n > 85) n = 85;
		if (s < -85) s = -85;
		var left = Math.floor(w/(unit*2))*(unit*2);
		var right = Math.ceil(e/(unit*2))*(unit*2);
		var top = Math.ceil(n/unit)*unit;
		var bottom = Math.floor(s/unit)*unit;
		this.eachLayer(this.removeLayer, this);

		for (var lon = left; lon < right; lon += (unit*2)) {
			if (lon > -180 || lon < 180) {
				for (var lat = bottom; lat < top; lat += unit) {
					// southwest is (lat,lon), northeast is (lat+unit, lon+2*unit)
					var bounds = [[lat, lon], [lat + unit, lon + (unit * 2)]];

					// use the center of the rectangle to avoid edge/boundary rounding errors
					var locator = this._getLocator(lon + unit, lat + (unit / 2));

					if(grid_two.includes(locator) || grid_four.includes(locator) || grid_six.includes(locator)) {

						if(grid_two_confirmed.includes(locator) || grid_four_confirmed.includes(locator) || grid_six_confirmed.includes(locator)) {
							var rectConfirmed = L.rectangle(bounds, {className: 'grid-rectangle grid-confirmed', color: this.options.confirmedColor,  weight: 1, fillOpacity: 1, fill:true, interactive: false});
							this.addLayer(rectConfirmed);
						} else {
							var rectWorked = L.rectangle(bounds, {className: 'grid-rectangle grid-worked', color: this.options.workedColor,  weight: 1, fillOpacity: 1, fill:true, interactive: false});
							this.addLayer(rectWorked);
						}
						// Controls text on grid on various zoom levels
						if (zoom < 2 || zoom > 2) {
							this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
						}
						if (zoom < 3 ) {
							this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
						}
					} else {
						if (grids.includes(locator) && grids !== '') {
							var rect = L.rectangle(bounds, {className: 'grid-rectangle grid-unworked', color: this.options.linecolor, weight: 1, fillOpacity: 0.15, fill:true, interactive: false});
							this.addLayer(rect);
							this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
						}
						if (grids == '') {
							if (zoom < 3 || zoom > 5) { // Controls if grid lines are shown according to zoom level
								this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
							}
						}
					}
					// This one shows all grids, not just the worked/confirmed
					if (grids == '') {
						if (zoom < 3 || zoom > 5) {
							this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
						}
					}
				}
			}
		}
		// Added this to print fields and field name, while still showing worked/confirmed gridsquares
		if (zoom < 6 && zoom > 2) {
			unit = 10;
			var left = Math.floor(w / (unit * 2)) * (unit * 2);
			var right = Math.ceil(e / (unit * 2)) * (unit * 2);
			var top = Math.ceil(n / unit) * unit;
			var bottom = Math.floor(s / unit) * unit;
			for (var lon = left; lon < right; lon += (unit * 2)) {
					for (var lat = bottom; lat < top; lat += unit) {
						var bounds = [[lat, lon], [lat + unit, lon + (unit * 2)]];

						this.addLayer(L.rectangle(bounds, {
							className: 'grid-rectangle',
							color: this.options.color,
							weight: 1,
							fill: false,
							interactive: false
						}));
						this.addLayer(this._getLabel2(lon + unit - (unit / field_cor), lat + (unit / 2) + (unit / lcor * c)));
					}
		}
		}
		return this;
	},

	_getLabel: function(lon,lat) {
	  var title_size = new Array(0, 10, 14, 16, 8.5, 13, 14, 16, 24, 36, 12, 14, 20, 36, 60, 12, 20, 36, 60, 12, 24); // Controls text size on labels
		var zoom = map.getZoom();
		var size = title_size[zoom]+'px';
		var title = '';
		var locator = this._getLocator(lon,lat);
		if (zoom != 3) {
			if(grid_four.includes(locator) || grid_four_confirmed.includes(locator) || grid_two.includes(locator) || grid_two_confirmed.includes(locator)) {
				title = '<span class="grid-text-worked" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + locator + '</font></span>';
			} else {
				title = '<span class="grid-text-unworked" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + locator + '</font></span>';
			}

		}
		var myIcon = L.divIcon({className: 'my-div-icon', html: title});
		var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
		if (zoom == 4 || zoom == 3) {
			marker.bindTooltip(locator);
		}
		if (typeof gridsquaremap !== 'undefined' && gridsquaremap == true) {
			marker.on('click', function(event) {
				spawnGridsquareModal(locator);
			});
		}
		return marker;
	},

	_getLocator: function(lon,lat) {
	  var ydiv_arr=new Array(10, 1, 1/24, 1/240, 1/240/24);
	  var d1 = "ABCDEFGHIJKLMNOPQR".split("");
	  var d2 = "ABCDEFGHIJKLMNOPQRSTUVWX".split("");
	  var d4 = new Array(0, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5);
      var locator = "";
      var x = lon;
      var y = lat;
      var precision = d4[map.getZoom()];
      while (x < -180) {x += 360;}
      while (x >= 180) {x -=360;}
      x = x + 180;
      y = y + 90;
      locator = locator + d1[Math.floor(x/20)] + d1[Math.floor(y/10)];
      for (var i=0; i<4; i=i+1) {
		if (precision > i+1) {
        rlon = x%(ydiv_arr[i]*2);
        rlat = y%(ydiv_arr[i]);
			if ((i%2)==0) {
				locator += Math.floor(rlon/(ydiv_arr[i+1]*2)) +""+ Math.floor(rlat/(ydiv_arr[i+1]));
			} else {
				locator += d2[Math.floor(rlon/(ydiv_arr[i+1]*2))] +""+ d2[Math.floor(rlat/(ydiv_arr[i+1]))];
			}
		}
	  }
      return locator;
	},

	/*
	Need this for the field printing, while showing worked/confirmed grids
	 */
	_getLabel2: function(lon,lat) {
		var title_size = new Array(0, 10, 12, 16, 20, 26, 26, 16, 24, 36, 12, 14, 20, 36, 60, 12, 20, 36, 60, 12, 24);
		var zoom = map.getZoom();
		var size = title_size[zoom]+'px';
		var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator2(lon,lat) + '</font></span>';
		var myIcon = L.divIcon({className: 'my-div-icon', html: title});
		var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
		return marker;
	},

	/*
	Need this for the field printing, while showing worked/confirmed grids
 	*/
	_getLocator2: function(lon,lat) {
		var ydiv_arr=new Array(10, 1, 1/24, 1/240, 1/240/24);
		var d1 = "ABCDEFGHIJKLMNOPQR".split("");
		var d2 = "ABCDEFGHIJKLMNOPQRSTUVWX".split("");
		var d4 = new Array(0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5);
		var locator = "";
		var x = lon;
		var y = lat;
		var precision = d4[map.getZoom()];
		while (x < -180) {x += 360;}
		while (x > 180) {x -=360;}
		x = x + 180;
		y = y + 90;
		locator = locator + d1[Math.floor(x/20)] + d1[Math.floor(y/10)];
		for (var i=0; i<4; i=i+1) {
			if (precision > i+1) {
				rlon = x%(ydiv_arr[i]*2);
				rlat = y%(ydiv_arr[i]);
				if ((i%2)==0) {
					locator += Math.floor(rlon/(ydiv_arr[i+1]*2)) +""+ Math.floor(rlat/(ydiv_arr[i+1]));
				} else {
					locator += d2[Math.floor(rlon/(ydiv_arr[i+1]*2))] +""+ d2[Math.floor(rlat/(ydiv_arr[i+1]))];
				}
			}
		}
		return locator;
	},

});

L.maidenhead = function (options) {
	return new L.Maidenhead(options);
};
