/**
 * Define the search panel behaviours
 *
 * @param {*} container_selector
 * @param {*} button_selector
 */
function SearchPanel() {



	var container_selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.search-panel';
	var button_selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '.open-search';
	  
	this.container = document.querySelector(container_selector);
	this.button    = document.querySelector(button_selector);
  
	this.open = false;
	
	this.loader      = this.container.querySelector('.search-loader');
	this.input       = this.container.querySelector('#search-input');
	this.results     = this.container.querySelector('#search-results');
	this.noresult    = this.container.querySelector('#no-result');
  
	this.postTypes = [ 'news', 'focus' ];
  
	this.boxes     = this.postTypes.reduce( ( boxes, type) => {
		
		let box = this.container.querySelector(`#search-${type}`) ;
		
		if (box != null) { boxes[type] = box }
  
		return boxes;    
	}, {});
	

	/**
	 * inizializza la visuazlizzazione delle card e associa 
	 * gli eventi alle funzioni handler
	 */
	this.init = function () {

		
	  
		/// rimuove dalla visualizzazione le card "prototipo"    
		for( let type in this.boxes ) {
			this.boxes[type].querySelector('.grid').innerHTML = '';        
		}
	
		/// associa agli eventi i relativi handler

		// click sul bottone ricerca
		this.button.addEventListener( 'click', this.toggle ); 

		// cambio di stato nell' input e nella form
		this.input.addEventListener( 'keyup', this.fire_search );
		this.input.addEventListener( 'change', this.fire_search );
		this.container.querySelector( 'form' ).addEventListener( 'submit', this.fire_search );
	};


	/**
	 * action called when research is fired
	 *
	 * @param {string} keyword
	 */
	this.search = function( keyword ) {
		
		/// disabilita il campo di ricerca 
		this.input.disabled = true; 
		
		/// abilita il loader
		this.loader.classList.add('visible'); 

		
		
		/// pulisce i contenitori delle cards
		for( let type in this.boxes ) {
			this.boxes[type].classList.remove( 'visible' );
			this.boxes[type].querySelector('.grid').innerHTML = ''; 
		}
		
		this.noresult.classList.remove('visible'); 
	
		/// call the search ajax endpoint 
		doPost('/wp/wp-admin/admin-ajax.php', {
		
			action: 'find',
			keyword: keyword

		}, function (result) {

			
		  /// riabilita il campo di ricerca 
		  this.input.disabled = false; /// disabilita il loader
		  
		  /// disbilita il loader	
		  this.loader.classList.remove('visible'); /// aggiorna il pannello

		  this.update(result);
	

		}.bind(this));
	};



	/**
	 * update results on the panel
	 */
	this.update = function (results) {
		
	
		let result_types = this.postTypes.filter( type => results[type].length > 0 );
  
  
		if( result_types.length == 0 ) {
		
			/// mostra messaggio "No Results"
			this.noresult.classList.add('visible');
		} else {
  
			result_types.forEach( type => {
				
				console.log('boxes',type, this.boxes, this.boxes[type]);
  
				if( typeof this.boxes[type] != 'undefined') {
					this.updateBox( this.boxes[type], results[type] );
				}
				
			});
		}
		
	}.bind(this);
  
	
	this.updateBox = function( box, posts ) {
	  
		console.log('box', box);
		posts.forEach( post => { console.log('box', box); this.append( box, post ); } );
  
		box.classList.add('visible');
	};
  
  
	this.append = function ( box, post ) {
	  
		var card = ' \
			<div class="col col-6 col-sm col-middle"> \
				<div class="card search-card notizie"> \
					<a href="__item.link__" class="cardlink" title="__item.title__"> \
						<span class="category __item.label__">__item.label__</span> \
						<h2>__item.title__</h2> \
					</a> \
				</div> \
			</div> \
		'; 
  
		/// replace fields with current data
		card = card.replace(/__item.link__/g, post.link);
		card = card.replace(/__item.title__/g, post.title);
		// card = card.replace(/__item.image__/g, news.image);
		card = card.replace(/__item.label__/g, post.category ? post.category : '');
	
		/// append the new card
		box.querySelector('.grid').insertAdjacentHTML( 'beforeend', card );
  
	}.bind(this);
	

	/**
	 * Functions to manage the visibility status of the
	 * search panel
	 */
	this.open = function () {
	  	this.container.classList.add('open');
	}.bind(this);
  
	this.close = function () {
	  	this.container.classList.remove('open');
	}.bind(this);
	
	/**
	 * visualizza o nasconde il pannello
	 */
	this.toggle = function () {
	  	this.container.classList.toggle('open');
	  	document.body.classList.toggle('noscroll');
	}.bind(this);
  
	this.wait_to_fire = null; /// set a 1 second interval before firing search
  
	/**
	 * Fa scattare la ricerca
	 * da chiamare quando viene scritto 
	 * qualcosa nella casella di ricerca	 
	 */  
	this.fire_search = function (event) {

	  	event.preventDefault();
	  	event.stopPropagation(); /// a new key is pressed, so let's reset the timer
  
	  	if (this.wait_to_fire != null) clearInterval(this.wait_to_fire); /// and restart a new one
	  
		/// se si digitano più di 2 caratteri scatta 
	  	/// il conto alla rovescia per la ricerca
  
	  	if (this.input.value.length > 2) {
			this.wait_to_fire = setInterval(function () {
		  		
				this.search(this.input.value); 
  				
				/// reset il timer
		  		clearInterval(this.wait_to_fire);

			}.bind(this), 800);
	  	}
	}.bind(this);
  
	this.init();
}