package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;

import org.gcube.application.geoportalcommon.shared.products.model.LayerConcessioneDV;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.MAP_PROJECTION;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.Location;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.PLACE;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;

import com.github.gwtbootstrap.client.ui.DropdownButton;
import com.github.gwtbootstrap.client.ui.NavLink;
import com.github.gwtbootstrap.client.ui.constants.ButtonType;
import com.github.gwtbootstrap.client.ui.constants.IconType;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;

import ol.Coordinate;

public class LayerConcessioneView extends Composite {

	private static LayerConcessioneUiBinder uiBinder = GWT.create(LayerConcessioneUiBinder.class);

	interface LayerConcessioneUiBinder extends UiBinder<Widget, LayerConcessioneView> {
	}

	@UiField
	HTMLPanel layerConcessionePanel;

	@UiField
	HTMLPanel mapViewPanel;

	private CustomFlexTable customTable = new CustomFlexTable();

	private static enum IMAGE_EXPORT_AS {
		PNG, JPEG
	};

	int downloadAttempt = 0;

	public LayerConcessioneView(LayerConcessioneDV layerDV) {
		initWidget(uiBinder.createAndBindUi(this));
		GWT.log("Showing: " + layerDV);

		GWT.log("WMS LINK: " + layerDV.getWmsLink());
		if (layerDV.getLayerName() != null && layerDV.getWmsLink() != null) {
			
			DropdownButton exportMapButton = new DropdownButton("Export Map as...");
			exportMapButton.setType(ButtonType.LINK);
			exportMapButton.setIcon(IconType.DOWNLOAD_ALT);
			exportMapButton.setTitle("Export the map view (OSM + layer) as an image...");
			Style exportStyle = exportMapButton.getElement().getStyle();
			//exportStyle.setWidth(100, Unit.PCT);
			exportStyle.setMarginLeft(70, Unit.PCT);

			Location italyLocation = ExtentMapUtil.getLocation(PLACE.ITALY);
			Coordinate transformedCenterCoordinate = italyLocation.getCoordinate(MAP_PROJECTION.EPSG_3857);
			MapView mapView = new MapView(transformedCenterCoordinate,
					GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON, "70%", "300px");
			
			mapViewPanel.add(mapView);
			mapViewPanel.add(exportMapButton);
			String mapServerHost = layerDV.getWmsLink().contains("?")
					? layerDV.getWmsLink().substring(0, layerDV.getWmsLink().indexOf("?"))
					: layerDV.getWmsLink();

			mapView.addWMSLayer(mapServerHost, layerDV.getLayerName(), layerDV.getBbox());
			
			String htmlLinkId = mapView.getPanelMapElementId() + "-image-download";
			
			for (IMAGE_EXPORT_AS exportType : IMAGE_EXPORT_AS.values()) {
				NavLink navLink = new NavLink(exportType.name());
				String exportExt = exportType.name().toLowerCase();
				String filename = layerDV.getLayerName() + "." + exportExt;
				String mimeType = "image/" + exportExt;
				final HTML htmlLink = new HTML("<a id=\"" + htmlLinkId + "\" download=\"" + filename + "\"></a>");
				navLink.getElement().appendChild(htmlLink.getElement());
				navLink.addClickHandler(new ClickHandler() {

					@Override
					public void onClick(ClickEvent event) {

						// DOWNLOAD only the layer by Geoserver
						/*
						 * Map<String, String> mapLayerURLs =
						 * mapView.getLightOLSM().getLayerURLsProperty(); Collection<String> layerURLs =
						 * mapLayerURLs.values(); ArrayList<String> layers = new
						 * ArrayList<String>(layerURLs); exportPDF(layers.get(0)); String layerURL =
						 * mapLayerURLs.get(layerDV.getLayerName()); GWT.log("layerDV name is: " +
						 * layerDV.getLayerName()); if (layerURL != null) Window.open(layerURL,
						 * "_blank", null);
						 */

						downloadAttempt++;

						if (downloadAttempt > 3) {
							Window.alert("LOOP");
							return;
						}

						// DOWNLOAD the OSM + layer by canvas
						downloadMap(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId(), htmlLinkId,
								filename, mimeType);
						// mapExport(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId());
					}
				});

				exportMapButton.add(navLink);

			}
			//mapViewPanel.add(exportMapButton);
		}

		customTable.addNextKeyValue("Abstract", layerDV.getAbstractSection());
		customTable.addNextKeyValue("Valutazione qualità", layerDV.getValutazioneQualita());
		customTable.addNextKeyValue("Metodo raccolta dati", layerDV.getMetodoRaccoltaDati());
		customTable.addNextKeyValue("Scala acquisizione dati", layerDV.getScalaAcquisizione());
		customTable.addNextKeyValues("Autori", layerDV.getAuthors(), GeoportalDataViewerConstants.NEW_LINE_BR);
		layerConcessionePanel.add(customTable);
	}

	public static native void exportPDF(String layerURL) /*-{
		var image = new Image(layerURL);

		var doc = new $wnd.jspdf.jsPDF();
		doc.addImage(layerURL, 'PNG', 0, 0, image.width, image.height);
		doc.save("map.pdf")
	}-*/;

	/**
	 * Prints the.
	 *
	 * @param msg the msg
	 */
	public static native void downloadMap(ol.Map map, String mapPanelId, String linkId, String filename,
			String mimeType)/*-{
		console.log("map: " + map);

		map.once('rendercomplete', function() {
			var mapCanvas = $doc.createElement('canvas');
			var size = map.getSize();
			mapCanvas.width = size[0];
			mapCanvas.height = size[1];
			var mapContext = mapCanvas.getContext('2d');
			var mapContainer = $doc.querySelector('#' + mapPanelId);
			//console.log("mapContainer:" +JSON.stringify(mapContainer, null, 4));
			Array.prototype.forEach.call(mapContainer
					.querySelectorAll('.ol-layer canvas'), function(canvas) {
				if (canvas.width > 0) {
					var opacity = canvas.parentNode.style.opacity;
					mapContext.globalAlpha = opacity === '' ? 1
							: Number(opacity);
					var transform = canvas.style.transform;
					// Get the transform parameters from the style's transform matrix
					var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1]
							.split(',').map(Number);
					// Apply the transform to the export map context
					CanvasRenderingContext2D.prototype.setTransform.apply(
							mapContext, matrix);
					mapContext.drawImage(canvas, 0, 0);
				}
			});
			if (navigator.msSaveBlob) {
				// link download attribute does not work on MS browsers
				navigator.msSaveBlob(mapCanvas.msToBlob(), filename);
			} else {
				var link = $doc.getElementById(linkId);
				link.href = mapCanvas.toDataURL(mimeType);
				link.click();
			}
		});
		map.renderSync();
	}-*/;

//	public static native void mapExport(ol.Map map, String mapPanelId)/*-{
//		try {
//			var dims = {
//				a0 : [ 1189, 841 ],
//				a1 : [ 841, 594 ],
//				a2 : [ 594, 420 ],
//				a3 : [ 420, 297 ],
//				a4 : [ 297, 210 ],
//				a5 : [ 210, 148 ],
//			};
//
//			var resolutions = {
//				72 : 72,
//				150 : 150,
//				300 : 300,
//			};
//
//			//var format = document.getElementById('format').value;
//			var format = 'a4';
//			//var resolution = document.getElementById('resolution').value;
//			var resolution = resolutions[150];
//			var dim = dims[format];
//			var width = Math.round((dim[0] * resolution) / 25.4);
//			var height = Math.round((dim[1] * resolution) / 25.4);
//			var size = map.getSize();
//			var viewResolution = map.getView().getResolution();
//
//			map.once('rendercomplete', function() {
//				var mapCanvas = $doc.createElement('canvas');
//				mapCanvas.width = width;
//				mapCanvas.height = height;
//				var mapContext = mapCanvas.getContext('2d');
//				var selectId = "#" + mapPanelId;
//				console.log('selectId: ' + selectId);
//				var container = $doc.querySelector(selectId);
//				console.log('container: ' + container);
//				Array.prototype.forEach.call(container
//						.querySelectorAll('.ol-layer canvas'),
//						function(canvas) {
//							canvas.crossOrigin = "anonymous"; // This enables CORS
//							if (canvas.width > 0) {
//								var opacity = canvas.parentNode.style.opacity;
//								mapContext.globalAlpha = opacity === '' ? 1
//										: Number(opacity);
//								var transform = canvas.style.transform;
//								// Get the transform parameters from the style's transform matrix
//								var matrix = transform
//										.match(/^matrix\(([^\(]*)\)$/)[1]
//										.split(',').map(Number);
//								// Apply the transform to the export map context
//								CanvasRenderingContext2D.prototype.setTransform
//										.apply(mapContext, matrix);
//								mapContext.drawImage(canvas, 0, 0);
//							}
//						});
//
//				//window.open(mapCanvas.toDataURL(), '_blank');
//
//				var pdf = new $wnd.jspdf.jsPDF('landscape', undefined, format);
//				pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0,
//						dim[0], dim[1]);
//				pdf.save('map.pdf');
//				// Reset original map size
//				map.setSize(size);
//				map.getView().setResolution(viewResolution);
//				exportButton.disabled = false;
//				document.body.style.cursor = 'auto';
//			});
//			//map.renderSync();
//	        // Set print size
//	        var printSize = [width, height];
//	        map.setSize(printSize);
//	        var scaling = Math.min(width / size[0], height / size[1]);
//	        map.getView().setResolution(viewResolution / scaling);
//		} catch (error) {
//			window.alert(error);
//		}
//	}-*/;

}