package org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs;

import org.gcube.portlets.user.accountingdashboard.shared.data.ReportElementData;

import com.google.gwt.event.logical.shared.AttachEvent;
import com.google.gwt.user.client.ui.HTMLPanel;

/**
 * 
 * @author Giancarlo Panichi
 *
 */
public class Chart extends HTMLPanel {

	private String name;
	private ReportElementData reportElementData;

	public Chart(String name, ReportElementData reportElementData) {
		super("<canvas id=" + name + "></canvas>");
		this.name = name;
		this.reportElementData = reportElementData;

		addAttachHandler(new AttachEvent.Handler() {

			@Override
			public void onAttachOrDetach(AttachEvent event) {
				if (event.isAttached()) {
					drawChart();
				}

			}
		});
	}

	private String getLabel() {
		return reportElementData.getLabel();
	}

	public String getCatgegory() {
		return reportElementData.getCategory();
	}

	public String getXAxisLabel() {
		return reportElementData.getxAxis();

	}

	public String getYAxisLabel() {
		return reportElementData.getyAxis();

	}

	/**
	 * LABEL | | _ yaxis | _ | | | | || |_ | | || | |
	 * ---------------------------------------------------
	 * 
	 * 
	 * *Series_label1 *Series_label2 *Series_label3
	 * 
	 * xAxis
	 * 
	 */

	/**
	 * Series[] { Series : LABEL, dataRow [] Series : LABEL, dataRow [] Series :
	 * LABEL, dataRow [] Series : LABEL, dataRow [] }
	 */

	private native void drawChart() /*-{

		var name = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
		console.log('Element name: ' + name);
		var element = this;
		console.log('Element found: ' + element);
		var canvas = $doc.getElementById(name);
		console.log('Canvas: ' + canvas);

		var color = Chart.helpers.color;
		console.log('Color: ' + color);
		var barChartData = {
			labels : [ 'January', 'February', 'March', 'April', 'May', 'June',
					'July' ],
			datasets : [ {
				label : 'Dataset 1',
				backgroundColor : 'rgba(255,0,0,0.9)',
				borderColor : 'rgba(255,0,0,1)',
				borderWidth : 1,
				data : [ 1, 2, 3, 1, 2, 3, 4 ]
			}, {
				label : 'Dataset 2',
				backgroundColor : 'rgba(0,0,255,0.9)',
				borderColor : 'rgba(0,0,255,1)',
				borderWidth : 1,
				data : [ 3, 4, 1, 2, 1, 2, 1 ]
			} ]

		};

		var label = this
				.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getLabel()();
	
		var xAxisLabel = this
				.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getXAxisLabel()();

		var yAxisLabel = this
				.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getYAxisLabel()();

		var ctx = canvas.getContext('2d');
		var chart = new Chart(ctx, {
			// The type of chart we want to create
			type : 'bar',
			data : barChartData,
			options : {
				responsive : true,
				legend : {
					position : 'top',
				},
				title : {
					display : true,
					text : label
				},
				scales : {
					xAxes : [ {
						scaleLabel : {
							display : true,
							labelString : xAxisLabel
						}
					} ],

					yAxes : [ {
						scaleLabel : {
							display : true,
							labelString : yAxisLabel
						},
						ticks : {
							beginAtZero : true
						}
					} ]
				}
			}
		});

	}-*/;

}