package org.sagebionetworks.web.client.widget.search;

import org.gwtbootstrap3.client.ui.Icon;
import org.gwtbootstrap3.client.ui.TextBox;
import org.sagebionetworks.web.client.DisplayUtils;

import com.google.gwt.core.shared.GWT;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;

public class SearchBoxViewImpl implements SearchBoxView {
	public interface Binder extends UiBinder<Widget, SearchBoxViewImpl> {}
	private Presenter presenter;
	Widget widget;
	@UiField
	Icon searchButton;
	@UiField
	TextBox searchField;
	
	public static final String INACTIVE_STYLE = "searchTextField";
	public static final String ACTIVE_STYLE = "searchTextField-active";
	
	@Inject
	public SearchBoxViewImpl(Binder binder) {
		widget = binder.createAndBindUi(this);
		searchField.getElement().setAttribute("placeholder", " Search");
		initClickHandlers();
	}
		
	private void initClickHandlers() {
	    searchField.addKeyDownHandler(new KeyDownHandler() {				
			@Override
			public void onKeyDown(KeyDownEvent event) {
				if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ENTER) {
					executeSearch();
	            }					
			}
		});
	    
	    searchButton.addClickHandler(event -> {
	    	if (searchField.getStyleName().contains(ACTIVE_STYLE)) {
	    		executeSearch();
	    		searchFieldInactive();
	    	} else {
		    	searchField.setFocus(true);
		    	searchFieldActive();
	    	}
	    });
	    searchButton.addDomHandler(event -> {
	    	searchFieldActive();
	    	searchField.setFocus(true);
	    }, MouseOverEvent.getType());
	    searchField.addBlurHandler(event -> {
			Timer timer = new Timer() { 
			    public void run() { 
			    	searchFieldInactive();    	
			    } 
			};
			timer.schedule(200);
	    });
	}
	
	private void searchFieldInactive() {
		searchField.removeStyleName(ACTIVE_STYLE);
		searchField.addStyleName(INACTIVE_STYLE);
	}
	private void searchFieldActive() {
		searchField.removeStyleName(INACTIVE_STYLE);
		searchField.addStyleName(ACTIVE_STYLE);
	}
	
	private void executeSearch() {
		presenter.search(searchField.getValue());
		searchField.setValue("");
	}
	
	@Override
	public Widget asWidget() {		
		return widget;
	}	

	@Override 
	public void setPresenter(Presenter presenter) {
		this.presenter = presenter;
	}
		
	@Override
	public void showErrorMessage(String message) {
		DisplayUtils.showErrorMessage(message);
	}

	@Override
	public void showLoading() {
	}

	@Override
	public void showInfo(String title, String message) {
		DisplayUtils.showInfo(title, message);
	}
	
	@Override
	public void setVisible(boolean isVisible) {
		widget.setVisible(isVisible);
	}
	
	@Override
	public void clear() {
		//searchField.setText("");		
	}

	/*
	 * Private Methods
	 */


}

@@ -1213,18 +1213,16 @@
 s();%0A%09%7D%0A
-%09%09
 %0A%09privat
@@ -1541,24 +1541,58 @@
 (event -%3E %7B%0A
+%09    %09searchField.setFocus(true);%0A
 %09    %09if (se
@@ -1676,263 +1676,43 @@
    %09
-%09searchFieldInactive();%0A%09    %09%7D else %7B%0A%09%09    %09searchField.setFocus(true);%0A%09%09    %09searchFieldActive();%0A%09    %09%7D%0A%09    %7D);%0A%09    searchButton.addDomHandler(event -%3E %7B%0A%09    %09searchFieldActive();%0A%09    %09searchField.setFocus(true);%0A%09    %7D, MouseOverEvent.getType()
+%7D%0A%09    %09searchFieldActive();%0A%09    %7D
 );%0A%09
@@ -1898,16 +1898,17 @@
     %7D);%0A
+%0A
 %09%7D%0A%09%0A%09pr
@@ -2196,16 +2196,61 @@
 rch() %7B%0A
+%09%09if (!%22%22.equals(searchField.getValue())) %7B%0A%09
 %09%09presen
@@ -2283,24 +2283,25 @@
 Value());%0A%09%09
+%09
 searchField.
@@ -2314,16 +2314,46 @@
 ue(%22%22);%0A
+%09%09%09searchFieldInactive();%0A%09%09%7D%0A
 %09%7D%0A%09%0A%09@O

simplify logic, fixes mobile interaction