package eu.dnetlib.client;

import com.github.gwtbootstrap.client.ui.Image;
import com.github.gwtbootstrap.client.ui.Modal;
import com.github.gwtbootstrap.client.ui.Tab;
import com.github.gwtbootstrap.client.ui.TabPanel;
import com.github.gwtbootstrap.client.ui.ThumbnailLink;
import com.github.gwtbootstrap.client.ui.Thumbnails;
import com.github.gwtbootstrap.client.ui.constants.BackdropType;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Widget;

import eu.dnetlib.client.leftColumn.OptionsWidget;
import eu.dnetlib.client.rightColumn.DataBox;
import eu.dnetlib.client.rightColumn.PreviewBox;
import eu.dnetlib.shared.SchemaAnswer;
import eu.dnetlib.shared.ValuesOfFields;

public class StartingModal extends Widget{

	private Modal masterModal = new Modal();
	private FlowPanel masterFlowPanel = new FlowPanel();
	private TabPanel masterTabPanel = new TabPanel();
    private Tab titleTab = new Tab();
	private Tab columnTab = new Tab();
	private Tab barTab = new Tab();
	private Tab lineTab = new Tab();
	private Tab areaTab = new Tab();
	private Tab pieTab = new Tab();
	private Tab otherTab = new Tab();
	private SchemaAnswer schemaFromServer;
	
	public StartingModal(SchemaAnswer schemaFromServer){
		
		this.schemaFromServer = schemaFromServer;
		
		designModal();
		designOptionsForColumn();
		designOptionsForBar();
		designOptionsForLine();
		designOptionsForArea();
		designOptionsForPie();
	}
	
	public void designModal(){
		
		masterTabPanel.setTitle("Select chart type");
		masterTabPanel.setTabPosition("left");
		masterTabPanel.addStyleName("startingmodal-left");

        titleTab.setHeading("Select chart type");
        titleTab.setEnabled(false);
		
		columnTab.setHeading("Column");
		Image columnImage= new Image("https://live.amcharts.com/static/img/landing/col.png");
		columnImage.addStyleName("imageStartingModal");
		columnTab.addDecorate(columnImage);
		
		columnTab.setActive(true);
		
		barTab.setHeading("Bar");
		Image barImage = new Image("https://live.amcharts.com/static/img/landing/bar.png");
		barImage.addStyleName("imageStartingModal");
		barTab.addDecorate(barImage);
		
		lineTab.setHeading("Line");
		Image lineImage = new Image("https://live.amcharts.com/static/img/landing/line.png");
		lineImage.addStyleName("imageStartingModal");
		lineTab.addDecorate(lineImage);
		
		areaTab.setHeading("Area");
		Image areaImage = new Image("https://live.amcharts.com/static/img/landing/area.png");
		areaImage.addStyleName("imageStartingModal");
		areaTab.addDecorate(areaImage);
		
		pieTab.setHeading("Pie");
		Image pieImage = new Image("https://live.amcharts.com/static/img/landing/pie.png");
		pieImage.addStyleName("imageStartingModal");
		pieTab.addDecorate(pieImage);
		
		otherTab.setHeading("Other types");
		Image otherImage = new Image("https://live.amcharts.com/static/img/landing/other.png");
		otherImage.addStyleName("imageStartingModal");
		otherTab.addDecorate(otherImage);

        masterTabPanel.add(titleTab);
		masterTabPanel.add(columnTab);
		masterTabPanel.add(barTab);
		masterTabPanel.add(lineTab);
		masterTabPanel.add(areaTab);
		masterTabPanel.add(pieTab);
		masterTabPanel.add(otherTab);
		
		masterFlowPanel.add(masterTabPanel);
		
		masterModal.add(masterFlowPanel);
		masterModal.addStyleName("startingmodal-general-body");
		
		masterModal.setBackdrop(BackdropType.STATIC);
		
		masterModal.show();
		masterModal.show(true);
	}
	
	public void designOptionsForColumn(){
		
		FlowPanel flowPanel = new FlowPanel();
		Thumbnails containerThumbnail = new Thumbnails();
		containerThumbnail.addStyleName("thumbnail-list");
		
		
		ThumbnailLink first = new ThumbnailLink();
		
		first.add(new HTML("<img src='./img/column/clustered.png'>" +
                "<label>Clustered</label>"));
		
		first.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,10,false);
				masterModal.hide();
			}
		});
		
		
		ThumbnailLink second = new ThumbnailLink();
		
		second.add(new HTML("<img src='./img/column/stacked.png'>" +
                "<label>Stacked (Mult. dataseries)</label>"));
		
		second.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,11,false);
				masterModal.hide();
				
			}
		});
		
		ThumbnailLink third = new ThumbnailLink();
		
		third.add(new HTML("<img src='./img/column/100-percent-stacked.png'>" +
                "<label>Full stacked</label>"));
		
		third.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,12,false);
				masterModal.hide();
				
			}
		});
		
		ThumbnailLink fourth = new ThumbnailLink();
		
		fourth.add(new HTML("<img src='./img/column/stacked-1data.png'>" +
                "<label>Stacked (1 dataseries)</label>"));
		
		fourth.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,13,false);
				masterModal.hide();
				
			}
		});
		
		ThumbnailLink fifth = new ThumbnailLink();
		
		fifth.add(new HTML("<img src='./img/column/column-and-line.png'>" +
                "<label>Column and line</label>"));
		
		fifth.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,14,false);
				masterModal.hide();
				
			}
		});
		
		containerThumbnail.add(first);
		containerThumbnail.add(third);
		containerThumbnail.add(second);
		containerThumbnail.add(fourth);
		containerThumbnail.add(fifth);
		
		flowPanel.add(containerThumbnail);
		
		
		columnTab.add(flowPanel);
	}
	
	public void designOptionsForBar(){
		
		FlowPanel flowPanel = new FlowPanel();
		Thumbnails containerThumbnail = new Thumbnails();
		containerThumbnail.addStyleName("thumbnail-list");
		
		
		ThumbnailLink first = new ThumbnailLink();
		
		first.add(new HTML("<img src='./img/bar/clustered.png'>" +
                "<label>Clustered</label>"));
		
		first.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,20,false);
				masterModal.hide();
			}
		});
		
		
		ThumbnailLink second = new ThumbnailLink();
		
		second.add(new HTML("<img src='./img/bar/stacked.png'>" +
                "<label>Stacked (Mult. dataseries)</label>"));
		
		second.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,21,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink third = new ThumbnailLink();
		
		third.add(new HTML("<img src='./img/bar/100-percent-stacked.png'>" +
                "<label>Full stacked</label>"));
		
		third.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,22,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink fourth = new ThumbnailLink();
		
		fourth.add(new HTML("<img src='./img/bar/stacked-1data.png'>" +
                "<label>Stacked (1 dataseries)</label>"));
		
		fourth.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,23,false);
				masterModal.hide();
			}
		});
		
		
		ThumbnailLink fifth = new ThumbnailLink();
		
		fifth.add(new HTML("<img src='./img/bar/bar-and-line.png'>" +
                "<label>Bar and line</label>"));
		
		fifth.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,24,false);
				masterModal.hide();
			}
		});
		
		containerThumbnail.add(first);
		containerThumbnail.add(second);
		containerThumbnail.add(third);
		containerThumbnail.add(fourth);
		containerThumbnail.add(fifth);
		
		flowPanel.add(containerThumbnail);
		
		
		barTab.add(flowPanel);
	}
	
	public void designOptionsForLine(){
		
		FlowPanel flowPanel = new FlowPanel();
		Thumbnails containerThumbnail = new Thumbnails();
		containerThumbnail.addStyleName("thumbnail-list");
		
		
		ThumbnailLink first = new ThumbnailLink();
		
		first.add(new HTML("<img src='./img/line/line.png'>" +
                "<label>Line (Mult. dataseries)</label>"));
		
		first.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,30,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink second = new ThumbnailLink();
		
		second.add(new HTML("<img src='./img/line/column-and-line.png'>" +
                "<label>Column and line</label>"));
		
		second.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,31,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink third = new ThumbnailLink();
		
		third.add(new HTML("<img src='./img/line/steps.png'>" +
                "<label>Line with steps</label>"));
		
		third.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				ValuesOfFields.getInstance().setSteps("true");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,32,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink fourth = new ThumbnailLink();
		
		fourth.add(new HTML("<img src='./img/line/line-1data.png'>" +
                "<label>Line (1 dataseries)</label>"));
		
		fourth.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,33,false);
				masterModal.hide();
			}
		});	
		
		containerThumbnail.add(first);
		containerThumbnail.add(second);
		containerThumbnail.add(third);
		containerThumbnail.add(fourth);
		
		flowPanel.add(containerThumbnail);
		
		
		lineTab.add(flowPanel);
	}
	
	public void designOptionsForPie(){
		
		FlowPanel flowPanel = new FlowPanel();
		Thumbnails containerThumbnail = new Thumbnails();
		containerThumbnail.addStyleName("thumbnail-list");
		
		
		ThumbnailLink first = new ThumbnailLink();
		
		first.add(new HTML("<img src='./img/pie/pie.png'>" +
                "<label>Pie</label>"));
		
		first.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,40,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink second = new ThumbnailLink();
		
		second.add(new HTML("<img src='./img/pie/3d-pie.png'>" +
                "<label>3D Pie</label>"));
		
		second.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,41,false);
				masterModal.hide();
			}
		});
	
		
		ThumbnailLink third = new ThumbnailLink();
		
		third.add(new HTML("<img src='./img/pie/donut.png'>" +
                "<label>Donut</label>"));
		
		third.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,42,false);
				masterModal.hide();
			}
		});
		
		
		containerThumbnail.add(first);
		containerThumbnail.add(second);
		containerThumbnail.add(third);
		flowPanel.add(containerThumbnail);
		
		
		pieTab.add(flowPanel);
	}
	
	public void designOptionsForArea(){
		
		FlowPanel flowPanel = new FlowPanel();
		Thumbnails containerThumbnail = new Thumbnails();
		containerThumbnail.addStyleName("thumbnail-list");
		
		
		ThumbnailLink first = new ThumbnailLink();
		
		first.add(new HTML("<img src='./img/area/area.png'>" +
                "<label>Area (Multi. dataseries)</label>"));
		
		first.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,50,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink second = new ThumbnailLink();
		
		second.add(new HTML("<img src='./img/area/area-stacked.png'>" +
                "<label>Area stacked</label>"));
		
		second.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,51,false);
				masterModal.hide();
			}
		});
	

		ThumbnailLink third = new ThumbnailLink();
		
		third.add(new HTML("<img src='./img/area/100-percent-stacked-area.png'>" +
                "<label>Area stacked 100%</label>"));
		
		third.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,52,false);
				masterModal.hide();
			}
		});
		
		ThumbnailLink fourth = new ThumbnailLink();
		
		fourth.add(new HTML("<img src='./img/area/area-1data.png'>" +
                "<label>Area (1 dataserie)</label>"));
		
		fourth.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent arg0) {
				// TODO Auto-generated method stub
				ValuesOfFields.getInstance().setChartType("chart");
				new PreviewBox();
				new DataBox();
				new OptionsWidget(schemaFromServer,53,false);
				masterModal.hide();
			}
		});
		
		containerThumbnail.add(first);
		containerThumbnail.add(second);
		containerThumbnail.add(third);
		containerThumbnail.add(fourth);
		
		flowPanel.add(containerThumbnail);
		
		
		areaTab.add(flowPanel);
	}
	
}