package eu.dnetlib.client.shared;

import java.util.ArrayList;
import java.util.HashMap;

import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.event.dom.client.DragStartHandler;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.dnd.core.client.DndDragStartEvent;
import com.sencha.gxt.dnd.core.client.DndDropEvent;
import com.sencha.gxt.dnd.core.client.DragSource;
import com.sencha.gxt.dnd.core.client.DropTarget;

import eu.dnetlib.client.resources.systemconfigration.ThemeOrdering;
import eu.dnetlib.client.resources.theme.Themes;
import eu.dnetlib.client.resources.topic.Topics;
import eu.dnetlib.client.shared.MainMenuBar.MenuPage;
import eu.dnetlib.efg1914.authoring.components.Frame;
import eu.dnetlib.efg1914.authoring.components.Theme;
import eu.dnetlib.efg1914.authoring.components.Topic;

public class DropBoxEdit implements IsWidget {
	private HorizontalDropPanel topicDropPanel = new HorizontalDropPanel(getTableMarkup());

	private int position;
	private String id = null;
	private HTML text = new HTML();
	private Image image = new Image();
	private HTML removeImg = new HTML("<span class='glyphicon glyphicon-remove'></span>");

	private boolean isChanged = false;
	private String thumbUrl = null;
	private String dragText = null;
	private String deletedText = null;
	private DropTarget target;
	private DropTarget target2;
	private boolean disableRemoveImage = false;

	private String serverPath;
	private Themes themes;
	private Topics topics;

	public DropBoxEdit(String dragText, String thumbURL, String deletedText) {
		this.dragText = dragText;
		this.thumbUrl = thumbURL;
		this.deletedText = deletedText;

		text.setText(dragText);
		removeImg.setVisible(false);
		image.setUrl(thumbUrl);

		removeImg.addClickHandler(new ClickHandler() {

			public void onClick(ClickEvent event) {
				clear();
			}
		});
		topicDropPanel.setStyleName("dropBoxEditEmptyPanel");
		image.setStyleName("dropBoxImage");

		final DropBoxEdit frDrBox = this;
		DragSource source = new DragSource(topicDropPanel) {
			@Override
			protected void onDragStart(DndDragStartEvent event) {
				super.onDragStart(event);
				// by default drag is allowed
				event.setData(frDrBox);

				final SafeHtmlBuilder builder = new SafeHtmlBuilder();
				String s = "<div style=\"background-image: url(" + thumbUrl + "); height: 100px; width: 99px; border: 1px solid black;\"> ";
				builder.appendHtmlConstant(s);
				builder.appendHtmlConstant(text.getText());
				builder.appendHtmlConstant("</div>");

				event.getStatusProxy().update(builder.toSafeHtml());

			}

		};
		// group is optional
		source.setGroup("rearrange");

		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

		text.setStyleName("dropBoxContent");
		topicDropPanel.setStyleName("dropBoxEditEmptyPanel");

		removeImg.setStyleName("dropBoxClose");

		topicDropPanel.getElement().setDraggable(Element.DRAGGABLE_TRUE);
		topicDropPanel.addDragStartHandler(new DragStartHandler() {

			public void onDragStart(DragStartEvent event) {

			}
		});
	}

	public DropBoxEdit(final HashMap<String, Topic> topicsHashMap, final Themes themes) {
		this("Drag here", "images/topic_thumb.png", "This topic has been deleted...");
		this.themes = themes;
		topicDropPanel.addDomHandler(new ClickHandler() {

			public void onClick(ClickEvent arg0) {
				themes.getTp().selectTab(1);

			}
		}, ClickEvent.getType());

		target = new DropTarget(topicDropPanel) {
			@Override
			protected void onDragDrop(DndDropEvent event) {
				super.onDragDrop(event);
				ResourceThumb resourceThumb = (ResourceThumb) event.getData();
				String resourceThumbId = resourceThumb.getId();
				if (!disableRemoveImage) {
					removeImg.setVisible(true);
				}

				setTopic(topicsHashMap.get(resourceThumbId));
				setChanged(true);
 			}

		};
		target.setOverStyle("drag-ok");
		target.setGroup("TopicBox");

		// ~~~~~~~~~~~~~~~~~~~~~~~~~~ the Drag and Drop for the rearrange
		// !~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

		target2 = new DropTarget(topicDropPanel) {
			@Override
			protected void onDragDrop(DndDropEvent event) {
				super.onDragDrop(event);
				DropBoxEdit newDropBox = (DropBoxEdit) event.getData();
				String newId = newDropBox.getId();

				ArrayList<String> arraylist = new ArrayList<String>();
				arraylist.addAll(themes.getTemplate().getTopics());
				if(arraylist.indexOf(newId)>arraylist.indexOf(id)){
					arraylist.remove(newId);
					arraylist.add(arraylist.indexOf(id), newId);
				}
				else if(arraylist.indexOf(newId)<arraylist.indexOf(id)){
					arraylist.remove(id);
					arraylist.add(arraylist.indexOf(newId), id);
				}
				else{
					return;
				}
				int i = 0;
				for (DropBoxEdit dropBoxEdit : themes.getTemplate().getTopicsdropbox()) {
					if (arraylist.get(i) != null) {
						dropBoxEdit.setTopic(topicsHashMap.get(arraylist.get(i)));
 						dropBoxEdit.setChanged(true);
					} else {
						dropBoxEdit.clear();
					}
					i++;
				}

			}

		};
		target2.setGroup("rearrange");
		target2.setOverStyle("drag-ok");

	}

	public DropBoxEdit(final HashMap<String, Frame> framesHashMap, final Topics topics) {
		this("Drag here", "images/frame_thumb.png", "This frame has been deleted...");
		this.topics=topics;
		topicDropPanel.addDomHandler(new ClickHandler() {

			public void onClick(ClickEvent arg0) {
				topics.getTp().selectTab(1);

			}
		}, ClickEvent.getType());

		target = new DropTarget(topicDropPanel) {
			@Override
			protected void onDragDrop(DndDropEvent event) {
				super.onDragDrop(event);
				ResourceThumb resourceThumb = (ResourceThumb) event.getData();
				String resourceThumbId = resourceThumb.getId();
				if (!disableRemoveImage) {
					removeImg.setVisible(true);
				}

				setFrame(framesHashMap.get(resourceThumbId));
				setChanged(true);

			}

		};
		target.setGroup("frameBox");
		target.setOverStyle("drag-ok");
		// ~~~~~~~~~~~~~~~~~~~~~~~~~~ the Drag and Drop for the rearrange
		// !~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

		target2 = new DropTarget(topicDropPanel) {
			@Override
			protected void onDragDrop(DndDropEvent event) {
				super.onDragDrop(event);
				DropBoxEdit newDropBox = (DropBoxEdit) event.getData();
				String newId = newDropBox.getId();
				ArrayList<String> arraylist = new ArrayList<String>();
				arraylist.addAll(topics.getTemplate().getFrames());
				if(arraylist.indexOf(newId)>arraylist.indexOf(id)){
					arraylist.remove(newId);
					arraylist.add(arraylist.indexOf(id), newId);
				}
				else if(arraylist.indexOf(newId)<arraylist.indexOf(id)){
					arraylist.remove(id);
					arraylist.add(arraylist.indexOf(newId), id);
				}
				else{
					return;
				}
				int i = 0;
				for (DropBoxEdit dropBoxEdit : topics.getTemplate().getFramesdropbox()) {
					if (arraylist.get(i) != null) {
						dropBoxEdit.setFrame(framesHashMap.get(arraylist.get(i)));
 						dropBoxEdit.setChanged(true);

					} else {
						dropBoxEdit.clear();
					}
					i++;
				}
			}

		};
		target2.setGroup("rearrange");
		target2.setOverStyle("drag-ok");
	}

	public DropBoxEdit(final StartUpComponents startUpComponents, final ThemeOrdering themeOrdering) {
		this("Drag here", "images/theme_thumb.png", "This theme has been deleted...");
		this.serverPath = startUpComponents.getServerPath();

		// ~~~~~~~~~~~~~~~~~~~~~~~~~~ the Drag and Drop for the rearrange
		// !~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		target2 = new DropTarget(topicDropPanel) {
			@Override
			protected void onDragDrop(DndDropEvent event) {
				super.onDragDrop(event);
				DropBoxEdit newDropBox = (DropBoxEdit) event.getData();
				String newId = newDropBox.getId();
				ArrayList<String> arraylist = new ArrayList<String>();
				arraylist.addAll(themeOrdering.getOrderedThemes());
				if(arraylist.indexOf(newId)>arraylist.indexOf(id)){
					arraylist.remove(newId);
					arraylist.add(arraylist.indexOf(id), newId);
				}
				else if(arraylist.indexOf(newId)<arraylist.indexOf(id)){
					arraylist.remove(id);
					arraylist.add(arraylist.indexOf(newId), id);
				}
				else{
					return;
				}
				int i = 0;
				for (DropBoxEdit dropBoxEdit : themeOrdering.getThemesdropboxlist().values()) {
					if (arraylist.get(i) != null) {
						dropBoxEdit.setTheme(startUpComponents.getAllThemes().get(arraylist.get(i)));
 						dropBoxEdit.setChanged(true);

					} else {
						dropBoxEdit.clear();
					}
					i++;
				}

			}

		};

		target2.setGroup("rearrange");
		target2.setOverStyle("drag-ok");

	}

	public Widget asWidget() {
		topicDropPanel.add(image);
		topicDropPanel.add(text);
		topicDropPanel.add(removeImg);
		return topicDropPanel;
	}

	public void clear() {
		if (id != null) {
			setChanged(true);

		}
		removeImg.setVisible(false);
		text.setText(dragText);
		text.getElement().getStyle().setColor("#000000");
		topicDropPanel.setStyleName("dropBoxEditEmptyPanel");

		id = null;
		image.setUrl(thumbUrl);
		if(themes!=null){
			themes.getTemplate().removeDropBox(this);
		}else if(topics!=null){
			topics.getTemplate().removeDropBox(this);
		}

	}

//	public void setTheme(Theme theme) {
//
//		setChanged(false);
//
//		this.id = theme.getId();
//		if (!disableRemoveImage) {
//			removeImg.setVisible(true);
//		}
//		text.setHTML("<a href=\"#page=" + MenuPage.THEME + "?id=" + theme.getId() + "\">" + theme.getTitle() + "</a>");
//
//		text.getElement().getStyle().setColor("#000000");
//		topicDropPanel.setStyleName("dropBoxPanel");
//		if (theme.getThumbnail() != null) {
//			image.setUrl(serverPath + theme.getThumbnail());
//
//		} else {
//			image.setUrl("images/theme_thumb.png");
//		}
//	}
//
//	public void setTopic(final Topic topic) {
//
//		setChanged(false);
//
//		this.id = topic.getId();
//		if (!disableRemoveImage) {
//			removeImg.setVisible(true);
//		}
//
//		text.addClickHandler(new ClickHandler() {
//
// 			public void onClick(ClickEvent arg0) {
//				themes.getTopics().cbAndpreviewHandlerForTopic(topic.getId(), true);
//
//			}
//		});
//		text.setHTML("<a href=\"#page=" + MenuPage.TOPIC + "?id=" + topic.getId() + "\">" + topic.getTitle() + "</a>");
//
//		text.getElement().getStyle().setColor("#000000");
//		topicDropPanel.setStyleName("dropBoxPanel");
//
//		image.setUrl("images/topic_thumb.png");
//	}
//
//	public void setFrame(final Frame frame) {
//		setChanged(false);
//		this.id = frame.getId();
//		if (!disableRemoveImage) {
//			removeImg.setVisible(true);
//		}
//		text.addClickHandler(new ClickHandler() {
// 			public void onClick(ClickEvent arg0) {
//				topics.getFrames().cbAndpreviewHandlerForFrame(frame.getId(), true);
//			}
//		});
//		text.setHTML("<a href=\"#page=" + MenuPage.FRAME + "?id=" + frame.getId() + "\">" + frame.getTitle() + "</a>");
//		text.getElement().getStyle().setColor("#000000");
//		topicDropPanel.setStyleName("dropBoxPanel");
//		image.setUrl(thumbUrl);
//	}
	public void setTheme(Theme theme) {
	 setComponent(theme.getId(), theme.getTitle(), MenuPage.THEME);
		if (theme.getThumbnail() != null) {
			image.setUrl(serverPath + theme.getThumbnail());
		}  
	}

	public void setTopic(final Topic topic) {
		 setComponent(topic.getId(), topic.getTitle(), MenuPage.TOPIC);
	}

	public void setFrame(final Frame frame) {
		 setComponent(frame.getId(), frame.getTitle(), MenuPage.FRAME);
	}
 
	public void setComponent(String id, String title, MenuPage  menuPage ){
		setChanged(false);
		this.id = id;
		if (!disableRemoveImage) {
			removeImg.setVisible(true);
		}
		text.setHTML("<a href=\"#page=" + menuPage + "?id=" + id + "\">" + title + "</a>");
		text.getElement().getStyle().setColor("#000000");
		topicDropPanel.setStyleName("dropBoxPanel");
		image.setUrl(thumbUrl);
	}
	public boolean isChanged() {
		return isChanged;
	}

	public void setDeleted(String id) {

		setChanged(false);

		this.id = id;
		if (!disableRemoveImage) {
			removeImg.setVisible(true);
		}
		text.setText(deletedText);
		topicDropPanel.setStyleName("dropBoxPanel");

		text.getElement().getStyle().setColor("#B50B1F");
		image.setUrl(thumbUrl);
	}

	public void setDisableRemoveImage(boolean disable) {
		this.disableRemoveImage = disable;
	}

	public void setChanged(boolean isChanged) {
		this.isChanged = isChanged;
	}

	public int getPosition() {
		return position;
	}

	public void setPosition(int position) {
		this.position = position;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	private native String getTableMarkup() /*-{
											return [										
											'<table   width=100%>',
											'<tr>',
											'<td class=image  ></td>',
											'<td class=text></td>',
											'<td class=remove></td>',											
											'</tr>',
											'</table>'
											].join("");
											}-*/;

}