/**
 * 
 */
package org.gcube.portlets.user.dataminermanager.client.experimentArea;

import java.util.ArrayList;
import java.util.List;

import org.gcube.portlets.user.dataminermanager.client.bean.Operator;
import org.gcube.portlets.user.dataminermanager.client.bean.OperatorCategory;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.HTML;
import com.sencha.gxt.core.client.Style.Side;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
import com.sencha.gxt.widget.core.client.tips.ToolTipConfig;


public class OperatorCategoryPanel extends SimpleContainer {

	private List<OperatorPanel> operatorPanelsList = null;
	private OperatorsPanelHandler handler;
	private static final int TOOLTIP_WIDTH = 300;
	private boolean isCollapsed = true;
	private OperatorCategory category;
	private HTML categoryHtml;
//	private LayoutContainer collapsedPanel = new LayoutContainer();
	

	/**
	 * @param cat
	 */
	public OperatorCategoryPanel(OperatorsPanelHandler handler, OperatorCategory cat) {
		super();		
		this.handler = handler;
		this.category = cat;
		init();
	}
	
	private void init(){
		// set category info
		categoryHtml = new HTML(category.getName() + " <span class='counter'>("+category.getOperators().size()+")</span>");
		categoryHtml.addStyleName("categoryItem");
		categoryHtml.addStyleName("categoryItem-Collapsed");
		ToolTipConfig tooltipConfig = createToolTip(category);
		setToolTipConfig(tooltipConfig);
		
		addDomHandler(new ClickHandler() {

			@Override
			public void onClick(ClickEvent event) {
				switchOpenClose();

			}

		}, ClickEvent.getType());
	
		
		add(categoryHtml);
	}

	/**
	 * @return
	 */
	private ToolTipConfig createToolTip(OperatorCategory cat) {
		ToolTipConfig tooltipConfig = new ToolTipConfig();
		tooltipConfig.setTitleHtml("<br>&nbsp;&nbsp;"+cat.getName());  
		tooltipConfig.setMouseOffsetX(0);
		tooltipConfig.setMouseOffsetY(0);
		tooltipConfig.setAnchor(Side.LEFT);
		tooltipConfig.setDismissDelay(5000);
		tooltipConfig.setBodyHtml(
				getTooltipTemplate(GWT.getModuleBaseURL(), cat.getId(), cat.hasImage(), cat.getDescription())
				);  
		//		config.setCloseable(true);  
		tooltipConfig.setMaxWidth(TOOLTIP_WIDTH);
		return tooltipConfig;
	}

	private String getTooltipTemplate(String base, String id, boolean hasImage, String description){ 
         String html =  
			"<div class='categoryItemTooltip'>"+
				"<img src='" + base + "../images/categories/"+(hasImage ? id : "DEFAULT_IMAGE")+".png' >"+
				description+
			"</div>";
			//    '<div><ul style="list-style: disc; margin: 0px 0px 5px 15px">', 
			//    '<li>5 bedrooms</li>', 
			//    '<li>2 baths</li>', 
			//    '<li>Large backyard</li>', 
			//    '<li>Close to metro</li>', 
			//    '</ul>', 
			//    '</div>' 
	
		return html; 
	};

	public void switchOpenClose() {
		if (isCollapsed)
			expand();
		else
			collapse();
	}

	/**
	 * 
	 */
	private void collapse() {
		categoryHtml.removeStyleName("categoryItem-Expanded");
		categoryHtml.addStyleName("categoryItem-Collapsed");

		for (OperatorPanel op: this.operatorPanelsList)
			this.remove(op);
		this.isCollapsed = true;
		forceLayout();
	}

	/**
	 * 
	 */
	private void expand() {
		if (operatorPanelsList==null) {
			// init operator panels
			operatorPanelsList = new ArrayList<OperatorPanel>();
			for (Operator op : category.getOperators()) {
				OperatorPanel operatorPanel = new OperatorPanel(op, handler);
				operatorPanelsList.add(operatorPanel);
			}
		}
		
		categoryHtml.removeStyleName("categoryItem-Collapsed");
		categoryHtml.addStyleName("categoryItem-Expanded");
		for (OperatorPanel op: this.operatorPanelsList)
			this.add(op);
		this.isCollapsed = false;
		forceLayout();
	}
}