(function ($) {
    // http://davidwalsh.name/javascript-debounce-function
    function debounce(func, wait, immediate) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeout = null;
                if (!immediate)
                    func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow)
                func.apply(context, args);
        };
    };    
    
    /*______________________________________________________*/
    
    $(function () {
    	$('#test').html(mm.display_name);
    	console.log(mm);
    	
    	$("#cardloading").attr('src', mm.loading);
    	$("#loading90").attr('src', mm.loading);
    	$("#done").attr('src', mm.done);
    	
    	init_clientname_input("#username");
    });
    
    function clientname_suggestions(){
        return  new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: mm.ajax_url + '?' + jQuery.param({
                    _ajax_nonce: mm.nonce, // nonce
                    action: "search_users", // action
                    pattern: "QUERY",  // search pattern
                }),
                wildcard: 'QUERY'      // %QUERY will be replace by users input in
            },                         // the url option.
        });
    }
    
    function onUpdateClientID (e, suggestion)
    {
    	console.log(suggestion);
    	console.log(e);
    }
    function init_clientname_input(selector){
      	//console.log('selector = ' + selector);
          // init Typeahead
          jQuery(selector).typeahead(
          {
              minLength: 0,
              highlight: true,
              hint:false,
          },
          {
              name: 'clientnames',
              source: clientname_suggestions(),   // suggestion engine is passed as the source
              display: function(item) {        // display: 'name' will also work
            	  //console.log('display' + item.userid);
            	  return item.username;
              },
              limit: 5,
              templates: {
                  suggestion: function(item) {
                  	//console.log(item);
                    return '<div><i class="fusion-li-icon fa-user fas"></i> '+ item.username +'-'+ item.userid +'</div>';
                  },
              	pending: function (query) {
              		return '<img src=' + mm.search_user + '>';
              	},
              },
              'updater' : function(item) {
            	  //console.log('selected +' + item);
            	  return item;
              }
          }).bind('typeahead:select', onUpdateClientID
          ).bind('typeahead:autocomplete', onUpdateClientID);     
    }
    
    function errUserName(msg)
    {
    	var el = $("#errUserName");
    	el.html(msg);
    	el.fadeIn();
    	setTimeout(function(){
    		el.fadeOut();
    	}, 2000);
    }
    
    //step1 
    $(document).on("click", "#step1", function(){
    	var input = $("#username").val();
    	if ( input == "" ){
    		errUserName(" cannot be empty");
    		return;
    	}
    	
        $.post(mm.ajax_url, { // POST request
            _ajax_nonce: mm.nonce, // nonce
            action: "list_users", // action
            client : input,
        }, function(response,  status, xhr){
        	step2_verify_user(response);	
        }).fail(function(){
        	errUserName("Network Error, Please try again later");
        });

    });
    
    //step2
    function step2_verify_user(response)
    {
    	var el = $("#userpass");
    	
    	el.slideToggle();
    }
    
    //verify  
    $(document).on("click", "#step2", function(){
    	var el = $('#details');
    	el.slideDown();
    });    
    
    //apply card  
    $(document).on("click", "#cardbtn", function(){
    	var loading = $('#cardloading');
    	var check = $('#card');
    	$(this).hide();
    	loading.show();
    	setTimeout(function(){
    		loading.hide();
    		check.show();
    	}, 2000);
    	
    });    

    //apply 90 meda;
    $(document).on("click", "#btn90", function(){
    	var loading = $('#loading90');
    	var check = $('#medal90');
    	$(this).hide();
    	loading.show();
    	
    	setTimeout(function(){
    		loading.hide();
    		check.show();
    	}, 2000);
    });    
    
    //confirm;
    $(document).on("click", "#confirm", function(){
    	var search = $("#search");
    	var verify = $("#userpass");
    	var details = $("#details");
    	var btn = $('#confirm');
    	var img = $('#done');
    	$(this).hide();
    	verify.hide();
    	details.hide();
    	search.hide();
    	img.show();
    	
    	setTimeout(function(){
    		btn.show();
    		img.hide();
    	}, 4000);
    });     

})(jQuery);