var SearchComponent = class SearchComponent {
	
	constructor(idInstance, events, venues, categories, inputId, resultsId, closeFunction, isFullSize)
	{
		this.idInstance = idInstance;
		this.eventsSearchJson = events;
		this.venuesSearchJson = venues;
		this.categorySearchJson = categories;
		this.statesHeaderJson = this.getStatesOfEvents(events);
		this.citiesHeaderJson = this.getCitiesOfEvents(events);
		this.inputId = inputId;
		this.resultsId = resultsId;
		this.closeFunction = closeFunction;
		this.isFullSize = isFullSize;
	}

	getStatesOfEvents(events)
	{
		var statesArray = new Array();
		if(events != null && events.length > 0)
		{
			for (var j=0; j < events.length; j++)
			{
				var eventItem = events[j];
				if(!statesArray.includes(eventItem.prR)) 
				{
					statesArray.push(eventItem.prR);
				}
			}
			return statesArray;
		}
		return null;
	}

	getCitiesOfEvents(events)
	{
		var citiesArray = new Array();
		if(events != null && events.length > 0)
		{
			for (var j=0; j < events.length; j++)
			{
				var eventItem = events[j];
				if(!citiesArray.includes(eventItem.pbR)) 
				{
					citiesArray.push(eventItem.pbR);
				}
			}
			return citiesArray;
		}
		return null;
	}

	searchBoxTyping(e)
	{
		var resultList = $(".result-header-searcher .item-search-header");
		var selected = $(".result-header-searcher .selected"); 

		$(".item-search-header.selected").removeClass("selected");
		
		if (e.key == "Enter")
		{
			//selected?
			if(selected != null && selected.length > 0)
			{
				var urlResult = selected.data("url");
				window.location.href = urlBase + urlResult;
				return false;
			}
			else
			{
				var textName = encodeURIComponent(document.getElementById(this.inputId).value);
				window.location.href = urlBase + 'search?text='+textName;
				return false;
			}      
			
		}
		if (e.key == "Escape")
		{
			this.renderSearchResults(null);
			if(this.isFullSize != null && this.isFullSize == true)
			{
				this.closeSearch();
			}
		}	
		else if(e.key == "ArrowUp") // up
		{   
			if (selected != undefined && selected != null)
			{
				if (selected.prev().length == 0)
				{
					$(".result-header-searcher .item-search-header:last").addClass("selected");
				}
				else
				{
					if(selected.prev().hasClass("item-search-header"))
					{
						selected.prev().addClass("selected");
					}
					else
					{
						selected.prev().prev().addClass("selected");
					}
				} 	
			}
		}
		else if(e.key == "ArrowDown") // down
		{	
			if (selected != undefined && selected != null)
			{
				if(selected.prev().length == 0)
				{
					$(".result-header-searcher .item-search-header:first").addClass("selected");
				}
				else
				{
					if(selected.next().hasClass("item-search-header"))
					{
						selected.next().addClass("selected");
					}
					else
					{
						selected.next().next().addClass("selected");
					}
				} 
			}
		}
		else
		{
			var results = null;
			var textName = encodeURIComponent(document.getElementById(this.inputId).value);
			var keyword = textoBuscar(textName).toLowerCase();
			if(keyword != null && keyword != "" && keyword.length > 1)
			{
				results = this.searchText(keyword);
				
			}
			else
			{
				results = this.searchText(null, true);
			}
			this.renderSearchResults(results);
		}
	}

	sendSearchText(){
		var textName = encodeURIComponent(document.getElementById(this.inputId).value);
		window.location.href = urlBase + 'search?text='+ (textName);
		return false;
	}

	showPreviewSearchResults()
	{
		var results = null;
		var textInput = encodeURIComponent(document.getElementById(this.inputId).value);
		var keyword = textoBuscar(textInput).toLowerCase();
		if(keyword != null && keyword != "" && keyword.length > 1)
		{
			results = this.searchText(keyword);
		}
		else
		{
			results = this.searchText(null, true);
		}
		
		this.renderSearchResults(results);
	}
	
	hidePreview(event)
	{
		if(event != null && event.relatedTarget != null && event.relatedTarget.tagName != null)
		{
			if(event.relatedTarget.tagName == 'BUTTON' || event.relatedTarget.tagName == 'A')
			{
		  		var href = event.relatedTarget.href;
	    		window.location = href;
	    		return;
		  	}
	  	}
		this.renderSearchResults(null);
	}

	searchText(keyword, showCategoriesPreview)
	{
		var results = {
			history: [],
			dictionary: [],
			events: [],
			venues: [],
			states: [],
			cities: [],
			tags: []
		}

		if(keyword != null && keyword != "")
		{

			//EVENTS
			if(this.eventsSearchJson != null && this.eventsSearchJson.length > 0)
			{
				var eventsArray = new Array();
				for (var j=0; j < this.eventsSearchJson.length; j++)
				{
					var event = this.eventsSearchJson[j];
					var objName = textoBuscar(getObjNameMultiLang(OBJ_TYPES_MULTILNG.EVENTS, event.idE)).toLowerCase();
					if(keyword.length < 1 || objName.indexOf(keyword) > -1)
					{
						eventsArray.push(event);
					}
				}
				results.events = eventsArray;
			}

			//VENUES
			if(this.venuesSearchJson != null && this.venuesSearchJson.length > 0)
			{
				var venuesArray = new Array();
				for (var j=0; j < this.venuesSearchJson.length; j++)
				{
					var venue = this.venuesSearchJson[j];
					var objName = textoBuscar(venue.valor).toLowerCase();
					if(keyword.length < 1 || objName.indexOf(keyword) > -1)
					{
						//IF THE PARENT VENUE IS ALREADY ADDED THE CHILD VENUE WILL NOT BE ADDED TOO
						if(venue.parentVenueId != null && venuesArray.filter(v => v.id == venue.parentVenueId || v.parentVenueId == venue.parentVenueId).length != 0)
						{
							continue;
						}
						//CHILDREN VENUES OF THE CURRENT PARENT VENUE CONTAINED IN THE ARRAY ARE REPLACED BY THE PARENT VENUE
						else if(venue.parentVenueId == null && venuesArray.filter(v => v.parentVenueId == venue.id).length != 0)
						{
							venuesArray = venuesArray.filter(v => v.parentVenueId != venue.id);
						}
						
						venuesArray.push(venue);
					}
				}
				results.venues = venuesArray;
			}

			//STATES
			if(this.statesHeaderJson != null && this.statesHeaderJson.length > 0)
			{
				var statesArray = new Array();
				for (var j=0; j < this.statesHeaderJson.length; j++)
				{
					var stateItem = this.statesHeaderJson[j];
					var objName = textoBuscar(stateItem).toLowerCase();
					if(keyword.length > 0 && objName.indexOf(keyword) != -1)
					{
						statesArray.push(stateItem);
					}
				}
				results.states = statesArray;
			}

			//CITIES
			if(this.citiesHeaderJson != null && this.citiesHeaderJson.length > 0)
			{
				var citiesArray = new Array();
				for (var j=0; j < this.citiesHeaderJson.length; j++)
				{
					var cityItem = this.citiesHeaderJson[j];
					var objName = textoBuscar(cityItem).toLowerCase();
					if(keyword.length > 0 && objName.indexOf(keyword) != -1)
					{
						citiesArray.push(cityItem);
					}
				}
				results.cities = citiesArray;
			}

			//CATEGORIES
			if(this.categorySearchJson != null && this.categorySearchJson.length > 0)
			{
				var categoriesArray = new Array();
				for(var f = 0; f < this.categorySearchJson.length; f++)
				{
					var objCategory = this.categorySearchJson[f];
					var nameTag = textoBuscar(objCategory.litTag).toLowerCase();
					if(keyword.length > 0 && nameTag.indexOf(keyword) != -1)
					{
						categoriesArray.push(objCategory);
					}
				}
				results.tags = categoriesArray;
			}

		}
		else
		{
			//PREVIEW
			if(showCategoriesPreview)
			{
				if(this.categorySearchJson != null && this.categorySearchJson.length > 0)
				{
					var categoriesArray = new Array();
					for(var f = 0; f < this.categorySearchJson.length; f++)
					{
						var objCategory = this.categorySearchJson[f];
						categoriesArray.push(objCategory);
					}
					results.tags = categoriesArray;
				}
			}

		}

		return results;
	}

	renderSearchResults(resultList)
	{
		var code = '';

		if(resultList != null)
		{
			//events
			let rEvents = resultList.events;
			if(rEvents != null && rEvents.length > 0)
			{
				code += this.renderEvents_header();
				for(var e = 0; e < rEvents.length; e++)
				{
					var itemEv = rEvents[e];
					code += this.renderEvent_result(itemEv);
				}
			}

			//venues
			let rVenues = resultList.venues;
			if(rVenues != null && rVenues.length > 0)
			{
				code += this.renderVenues_header();
				for(var e = 0; e < rVenues.length; e++)
				{
					var itemVe = rVenues[e];
					code += this.renderVenue_result(itemVe);
				}
			}

			//categories
			let rTags = resultList.tags;
			if(rTags != null && rTags.length > 0)
			{
				code += this.renderTags_header();
				for(var e = 0; e < rTags.length; e++)
				{
					var itemVe = rTags[e];
					code += this.renderTag_result(itemVe);
				}
			}

			//states
			let rStates = resultList.states;
			if(rStates != null && rStates.length > 0)
			{
				code += this.renderStates_header();
				for(var e = 0; e < rStates.length; e++)
				{
					var itemSt = rStates[e];
					code += this.renderState_result(itemSt);
				}
			}

			//cities
			let rCities = resultList.cities;
			if(rCities != null && rCities.length > 0)
			{
				code += this.renderCities_header();
				for(var e = 0; e < rCities.length; e++)
				{
					var itemSt = rCities[e];
					code += this.renderCity_result(itemSt);
				}
			}

			let resultIdComponent = this.resultsId;

			setTimeout(function(){
				document.getElementById(resultIdComponent).innerHTML = code;
			}, 100);
		}
		else
		{
			let resultIdComponent = this.resultsId;
			document.getElementById(resultIdComponent).innerHTML = "";
		}
	}

	renderEvents_header()
	{
		var code = "";
		code += "<li><div class='item-header-list'>"+polyglot.t("global.Events")+"</div></li>";
		return code;
	}

	renderEvent_result(eventItem)
	{
		var codeEvent = this.getSearchEventTemplate();

		var regexName = new RegExp('%%name%%', 'g');
		var regexStateName = new RegExp('%%state%%', 'g');
		var regexCityName = new RegExp('%%city%%', 'g');
		var regexVenueName = new RegExp('%%venueName%%', 'g');
		var regexUrlBanner = new RegExp('%%urlBanner%%', 'g');
		var regexAddress = new RegExp('%%address%%', 'g');
		var regexCelebDate = new RegExp('%%celebDate%%', 'g');
		var regexPrice = new RegExp('%%price%%', 'g');
		var regexDur = new RegExp('%%duration%%', 'g');
		var regexResume = new RegExp('%%resume%%', 'g');
		var regexUrl = new RegExp('%%url%%', 'g');
		var regexVenues = new RegExp('%%venues%%', 'g');
		var regexCategories = new RegExp('%%categories%%', 'g');
		var regexDates = new RegExp('%%dates%%', 'g');
		var regexPriceMin = new RegExp('%%priceFrom%%', 'g');
		var regexPriceMax = new RegExp('%%priceUpTo%%', 'g');
		var regexTextDuration = new RegExp('%%text_duration%%', 'g');


		codeEvent = codeEvent.replace(regexName, getObjNameMultiLang(OBJ_TYPES_MULTILNG.EVENTS, eventItem.idE));
		codeEvent = codeEvent.replace(regexStateName, eventItem.prR);
		codeEvent = codeEvent.replace(regexCityName, eventItem.pbR);
		codeEvent = codeEvent.replace(regexVenueName, eventItem.nR);
		var urlBanner = 'img_web/' + eventItem.idEm + '/' + eventItem.idR + '/'+ eventItem.idE +'/s_banner.jpg';
		codeEvent = codeEvent.replace(regexUrlBanner, urlBanner);
		//codeEvent = codeEvent.replace(regexAddress, eventItem.dR + ', ' + eventItem.pbR + '('+ eventItem.prR +')');
		codeEvent = codeEvent.replace(regexAddress, eventItem.pbR + ', '+ eventItem.prR);


		var sesionesEvento = eventItem.ses;
		var litDate = '';
		if(eventItem.sP && sesionesEvento.length == 0){

		}
		else if(sesionesEvento != null && sesionesEvento.length > 1)
		{

			var maxSes = sesionesEvento.length-1;
			if(sesionesEvento[0] != sesionesEvento[maxSes])
			{
				litDate = sesionesEvento[0] + " - " + sesionesEvento[maxSes];
			}
			else
			{
				litDate = sesionesEvento[0];
			}
		}
		else
		{
			if(eventItem.uLS){
				if(sesionesEvento != null && sesionesEvento.length > 0){
					litDate = sesionesEvento[0];
				}
			}
		}

		codeEvent = codeEvent.replace(regexCelebDate, litDate);


		var price = '';
		if(eventItem.sMP == 1)
		{
			price = getCurrencyFormatted(eventItem.pMin) + " <small>"+polyglot.t("fee_not_included")+"</smal>";
		}
		else if(eventItem.sMP == 2)
		{
			price = getCurrencyFormatted(eventItem.pMinC);
		}
		else{

		}

		codeEvent = codeEvent.replace(regexPrice, price);

		if(eventItem.sMP == 1)
		{
			codeEvent = codeEvent.replace(regexPriceMin, eventItem.pMin);
			codeEvent = codeEvent.replace(regexPriceMax, eventItem.pMax);
		}
		else
		{
			codeEvent = codeEvent.replace(regexPriceMin, eventItem.pMinC);
			codeEvent = codeEvent.replace(regexPriceMax, eventItem.pMaxC);
		}


		if(eventItem.sDu)
		{
			codeEvent = codeEvent.replace(regexTextDuration, polyglot.t("Duration"));
			codeEvent = codeEvent.replace(regexDur, eventItem.dur+' '+polyglot.t("min"));
		}
		else
		{
			codeEvent = codeEvent.replace(regexTextDuration, '');
			codeEvent = codeEvent.replace(regexDur, '');
		}

		var resumes = eventItem.res;
		var text_resumes = null;
		var resume_idioma = '';
		if(resumes != null)
		{
			text_resumes = resumes;
			var idiomas_res = text_resumes.idiomas;
			var textos_res = text_resumes.textos;
			if(idiomas_res != null && idiomas_res.length > 0)
			{
				for(var e=0; e<idiomas_res.length; e++)
				{
					var idioma_res = idiomas_res[e];
					if(idioma_res == idioma)
					{
						resume_idioma = textos_res[e];
					}
				}
			}
		}
		codeEvent = codeEvent.replace(regexResume, resume_idioma);
		var urlEventStr = eventItem.url;
		if(eventItem.hasOwnProperty("urlF") && eventItem.urlF != null && eventItem.urlF.length > 0)
		{
			urlEventStr = eventItem.urlF;
		}
		if(eventItem.hasOwnProperty("urlRd") && eventItem.urlRd != null && eventItem.urlRd.length > 0)
		{
			urlEventStr = eventItem.urlRd;
		}
		codeEvent = codeEvent.replace(regexUrl, urlEventStr);
		codeEvent = codeEvent.replace(regexVenues, eventItem.idR);

		var categoriesEvent = eventItem.tags;
		var strCats = '';
		if(categoriesEvent != null && categoriesEvent.length > 0)
		{
			for(var r = 0; r < categoriesEvent.length; r++){
				var tag = categoriesEvent[r];
				if(strCats != ''){
					strCats += "|" + tag.idTag;
				}else{
					strCats = tag.idTag;
				}
			}
		}
		else
		{
			strCats = "0";
		}
		codeEvent = codeEvent.replace(regexCategories, strCats);


		var sesionsEvent = eventItem.ses;
		var strSesions = '';
		if(sesionsEvent != null && sesionsEvent.length > 0)
		{
			for(var r = 0; r < sesionsEvent.length; r++)
			{
				var sesion = sesionsEvent[r];
				if(strSesions != ''){
					strSesions += "|" + sesion;
				}
				else
				{
					strSesions += sesion;
				}
			}
		}
		codeEvent = codeEvent.replace(regexDates, strSesions);

		return codeEvent;
	}

	getSearchEventTemplate()
	{
		//Custom function
		if( typeof getSearchEventTemplateCustom === 'function' )
		{
			return getSearchEventTemplateCustom();
		}
		
		return '<li class="item-search-header" data-url="%%url%%" data-name="%%name%%" data-state="%%state%%" data-city="%%city%%" data-venues="%%venues%%" data-categories="%%categories%%" data-price-from="%%priceFrom%%" data-price-up-to="%%priceUpTo%%" data-dates="%%dates%%" >' +
									'<a href="%%url%%">' +
										'<div class="item-result-banner">' +
											'<div class="banner-wrapper">' +
												'<div class="image-banner" style="background-image: url(%%urlBanner%%);"></div>' +
											'</div>' +
											'<div class="body-wrapper">' +
												'<div data-test="title" class="title-text">%%name%%</div>' +
												'<p class="info-venue-text">%%venueName%% - %%address%%</p>' +
												'<p class="info-date-text"><span class="p4money" data-amount="%%price%%">%%price%% </span> %%celebDate%%</p>' +
											'</div>' +
										'</div>' +
									'</a>' +
								'</li>';
	}

	renderVenues_header()
	{
		var code = "";
		code += "<li><div class='item-header-list'>"+polyglot.t("global.Venues")+"</div></li>";
		return code;
	}

	renderVenue_result(venue)
	{
		var codeVenueItemList = this.getSearchVenueTemplate();

		var codeVenue = codeVenueItemList;
		var regexVenueName = new RegExp('%%venueName%%', 'g');
		var regexUrl = new RegExp('%%url%%', 'g');
		codeVenue = codeVenue.replace(regexVenueName, venue.valor);
		var urlVenueStr = 'eventosRecinto?idRecinto='+venue.id;
		codeVenue = codeVenue.replace(regexUrl, urlVenueStr);

		return codeVenue;
	}

	getSearchVenueTemplate()
	{
		var codeVenueItemList = '<li class="item-search-header" data-url="%%url%%">' +
									'<a href="%%url%%">' +
										'<div class="item-result-venue">' +
											'%%venueName%%' +
										'</div>' +
									'</a>' +
								'</li>';

		//Custom function
		if( typeof getSearchVenueTemplateCustom === 'function' )
		{
			return getSearchVenueTemplateCustom();
		}
		else
		{
			return codeVenueItemList;
		}
	}

	renderTags_header()
	{
		var code = "";
		code += "<li><div class='item-header-list'>"+polyglot.t("global.Categories")+"</div></li>";
		return code;
	}

	renderTag_result(tag)
	{
		var codeTagItemList = this.getSearchTagTemplate();
		var codeTag = codeTagItemList;
		var regexTagName = new RegExp('%%tagName%%', 'g');
		var regexUrl = new RegExp('%%url%%', 'g');
		codeTag = codeTag.replace(regexTagName, tag.litTag);
		var urlTagStr = 'search?category='+tag.idTag;
		codeTag = codeTag.replace(regexUrl, urlTagStr);

		return codeTag;
	}

	getSearchTagTemplate()
	{
		var codeTagItemList = '<li class="item-search-header" data-url="%%url%%">' +
									'<a href="%%url%%">' +
										'<div class="item-result-venue">' +
											'%%tagName%%' +
										'</div>' +
									'</a>' +
								'</li>';

		//Custom function
		if( typeof getSearchTagTemplateCustom === 'function' )
		{
			return getSearchTagTemplateCustom();
		}
		else
		{
			return codeTagItemList;
		}
	}

	renderStates_header()
	{
		var code = "";
		code += "<li><div class='item-header-list'>"+polyglot.t("global.States")+"</div></li>";
		return code;
	}

	renderState_result(state)
	{
		var codeTagItemList = '<li class="item-search-header" data-url="%%url%%">' +
									'<a href="%%url%%">' +
										'<div class="item-result-venue">' +
											'%%stateName%%' +
										'</div>' +
									'</a>' +
								'</li>';

		var codeTag = codeTagItemList;
		var regexTagName = new RegExp('%%stateName%%', 'g');
		var regexUrl = new RegExp('%%url%%', 'g');
		codeTag = codeTag.replace(regexTagName, state);
		var urlTagStr = 'search?state='+state;
		codeTag = codeTag.replace(regexUrl, urlTagStr);

		return codeTag;
	}

	renderCities_header()
	{
		var code = "";
		code += "<li><div class='item-header-list'>"+polyglot.t("global.Cities")+"</div></li>";
		return code;
	}

	renderCity_result(city)
	{
		var codeTagItemList = '<li class="item-search-header" data-url="%%url%%">' +
									'<a href="%%url%%">' +
										'<div class="item-result-venue">' +
											'%%cityName%%' +
										'</div>' +
									'</a>' +
								'</li>';

		var codeTag = codeTagItemList;
		var regexTagName = new RegExp('%%cityName%%', 'g');
		var regexUrl = new RegExp('%%url%%', 'g');
		codeTag = codeTag.replace(regexTagName, city);
		var urlTagStr = 'search?city='+city;
		codeTag = codeTag.replace(regexUrl, urlTagStr);

		return codeTag;
	}

	closeSearch()
	{
		if(this.closeFunction != null)
		{
			this.closeFunction();
		}
	}

}

/*

var searchComponentItem = null;

document.addEventListener("DOMContentLoaded", function() {
  
  	var eventsSearchJson = _eventsInfoForSearchEngine.events;
	var venuesSearchJson = _eventsInfoForSearchEngine.eventVenuesValorIdList;
	var categorySearchJson = _eventsInfoForSearchEngine.eventCategoriesList;
  
	searchComponentItem = new SearchComponent('1', eventsSearchJson, venuesSearchJson, categorySearchJson);
	
});

*/