class ACLSearchboxSuggestions {
	constructor(searchboxEl, filters) {
		this.searchboxEl = searchboxEl;
		this.filters = filters;
		this.filterChips;
		this.resultCount = 0;
		this.searchValue;
		this.results;
		this.currentFocus;
		this.resultsEl;
	}

	autocomplete(results) {
		let self = this;

		this.results = results;

		let chipSet;
		let allChips;
		let selectedChips;
		let filterCount;

		this.filterButtonEl = this.searchboxEl.querySelector('.acl-searchbox__filter-button');
		this.resultsEl = this.searchboxEl.querySelector('.acl-searchbox__results');

		const searchInputEl = this.searchboxEl.querySelector('input');
		const closeFiltersButtonEl = this.searchboxEl.querySelector('.acl-searchbox__filters-close');
		const filterBannerEl = this.searchboxEl.querySelector('.acl-searchbox__filters-banner');
		const filterBannerResultsEl = this.searchboxEl.querySelector('.acl-searchbox__filters-banner-preview');
		const selectedFilterCountLabel = this.searchboxEl.querySelector('.acl-searchbox__filter-selected-count');
		const filterPanel = this.searchboxEl.querySelector('.acl-searchbox__filters-chips');
		const searchboxHeader = this.searchboxEl.querySelector('.acl-searchbox__header');
		const searchboxFilters = this.searchboxEl.querySelector('.acl-searchbox__filters');

		if (this.filters) {
			addFilters(this.filters);
		}

		if (closeFiltersButtonEl) {
			closeFiltersButtonEl.addEventListener('click', function() {
				toggleFilterPanel();

				if (filterCount > 0) {
					filterBannerEl.classList.remove('acl-searchbox__filters-banner--hidden');
				}

				postFilterEventChanges();
			});
		}

		if (this.filterButtonEl) {
			this.filterButtonEl.addEventListener('click', function() {
				toggleFilterPanel();
				filterBannerEl.classList.add('acl-searchbox__filters-banner--hidden');
				hideDropdownList(self.searchboxEl);
			});
		}

		if (this.resultsEl) {
			this.resultsEl.addEventListener('click', function(e) {
				let autocompleteText = e.target.dataset.autocompleteItemName;
				let autocompleteId = e.target.dataset.autocompleteItemId;

				if (autocompleteText) {
					searchInputEl.value = e.target.dataset.autocompleteItemName;
				}

				postResultSelectedEvent(autocompleteId);
				toggleDropdownListVisibility(searchboxEl);
			});
		}

		/*execute a function when someone writes in the text field:*/
		searchInputEl.addEventListener('input', function(e) {
			self.searchValue = this.value;
			self.closeAllLists();

			if (!self.searchValue) {
				if (filterCount == 0) {
					self.filterButtonEl.classList.add('acl-searchbox__filter-button--hidden', 'animated', 'fadeOut');
				}

				postSearchQueryEvent();
			} else {
				if (self.searchValue.length > 2 && self.results) {
					self.generateResults(self.searchValue, self);
				}

				if (self.searchValue.length > 2 && self.filterButtonEl) {
					self.filterButtonEl.classList.remove('acl-searchbox__filter-button--hidden', 'animated', 'fadeOut');
				}

				postSearchQueryEvent(self.searchValue);
			}
		});

		/*execute a function presses a key on the keyboard:*/
		searchInputEl.addEventListener('keydown', function(e) {
			var x = document.getElementById(this.id + 'acl-autocomplete-list');
			if (x) x = x.querySelectorAll('.acl-autocomplete__item');

			if (e.keyCode == 40) {
				/*If the arrow DOWN key is pressed, increase the currentFocus variable:*/
				this.currentFocus++;
				/*and and make the current item more visible:*/

				addActive(x);
			} else if (e.keyCode == 38) {
				//up

				/*If the arrow UP key is pressed, decrease the currentFocus variable:*/
				this.currentFocus--;
				/*and and make the current item more visible:*/

				addActive(x);
			} else if (e.keyCode == 13) {
				/*If the ENTER key is pressed, prevent the form from being submitted,*/
				e.preventDefault();

				if (this.currentFocus > -1) {
					/*and simulate a click on the "active" item:*/
					if (x) {
						x[this.currentFocus].click();
					}
				}
			}
		});

		function addActive(x) {
			/*a function to classify an item as "active":*/
			if (!x) return false;
			/*start by removing the "active" class on all items:*/

			removeActive(x);
			if (this.currentFocus >= x.length) this.currentFocus = 0;
			if (this.currentFocus < 0) this.currentFocus = x.length - 1;
			/*add class "autocomplete-active":*/

			x[this.currentFocus].classList.add('autocomplete-active');
		}

		function removeActive(x) {
			/*a function to remove the "active" class from all autocomplete items:*/
			for (var i = 0; i < x.length; i++) {
				x[i].classList.remove('autocomplete-active');
			}
		}

		function toggleDropdownListVisibility(elmnt) {
			const dropdown = elmnt.querySelector('.acl-autocomplete__items');
			dropdown.classList.toggle('acl-autocomplete__items--hidden');
		}

		function hideDropdownList(elmnt) {
			const dropdown = elmnt.querySelector('.acl-autocomplete__items');
			if (dropdown) {
				dropdown.classList.add('acl-autocomplete__items--hidden');
			}
		}

		function postFilterEventChanges() {
			let filterIds = 0;

			if (selectedChips.length > 0) {
				filterIds = selectedChips.map(selectedChip => {
					return selectedChip.id;
				});
			}

			self.searchboxEl.dispatchEvent(
				new CustomEvent('selectedfilterchips', {
					detail: {
						chips: filterIds,
					},
				})
			);
		}

		function postResultSelectedEvent(autocompleteId) {
			self.searchboxEl.dispatchEvent(
				new CustomEvent('resultselected', {
					detail: {
						resultId: autocompleteId,
					},
				})
			);
		}

		function postSearchQueryEvent(searchValue) {
			self.searchboxEl.dispatchEvent(
				new CustomEvent('searchquery', {
					detail: {
						searchValue: searchValue,
					},
				})
			);
		}

		function addFilters(filters) {
			if (filterPanel) {
				for (var i = 0; i < filters.length; i++) {
					filterPanel.innerHTML += `<div class="acl-chip acl-ripple-upgraded" role="row" data-filter-text="${filters[i].name}" id="${filters[i].id}"
        style="--acl-ripple-fg-size:57px; --acl-ripple-fg-scale:1.94633; --acl-ripple-fg-translate-start:16.4414px, 
            - 21.9688px; --acl-ripple-fg-translate-end: 19.3672px, -12.5px;">
                <span role="button" tabindex="0" class="acl-chip__text">${filters[i].name}</span>
                    <div class="acl-chip__checkmark">
                        <svg class="acl-chip__checkmark-svg" viewBox="-3 -3 30 30">
                            <path class="" fill="white" stroke="none" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><path d="M0 0h24v24H0z" fill="none" />
                        </svg>
                    </div>
</div>`;
				}

				if (self.searchboxEl) {
					getAllChips();
				}
			}
		}

		function toggleFilterPanel() {
			searchboxFilters.classList.toggle('acl-searchbox__filters--hidden');
			searchboxHeader.classList.toggle('acl-searchbox__header--hidden');
			setSelectedFilterCount();
			setFilterBannerPreview();
		}

		function getAllChips() {
			const chipSetEls = Array.from(self.searchboxEl.querySelectorAll('.acl-chip-set'));
			chipSetEls.forEach(el => {
				chipSet = new acl.MDCChipSet(el);
			});
			return chipSet;
		}

		function getSelectedChips() {
			allChips = getAllChips();
			selectedChips = allChips.chips.filter(element => element.selected == true);
			return selectedChips;
		}

		function setSelectedFilterCount() {
			const selectedFilters = getSelectedChips();
			filterCount = selectedFilters.length;
			selectedFilterCountLabel.innerHTML = filterCount;

			if (selectedFilters.length > 0) {
				selectedFilterCountLabel.classList.add('acl-searchbox__filter-selected-count--visible');
				self.filterButtonEl.classList.add('acl-searchbox__filter-button--inc-count');
			} else {
				selectedFilterCountLabel.classList.remove('acl-searchbox__filter-selected-count--visible');
				filterBannerEl.classList.add('acl-searchbox__filters-banner--hidden');
				self.filterButtonEl.classList.remove('acl-searchbox__filter-button--inc-count');
			}
		}

		function setFilterBannerPreview() {
			const selectedFilters = getSelectedChips();
			filterBannerResultsEl.innerHTML = '';

			if (selectedFilters.length > 0) {
				selectedFilters.slice(0, 2).forEach(function(element) {
					filterBannerResultsEl.innerHTML += `<div class="acl-searchbox__filters-banner-item" data-filter-id="${element.id}" id="${element.id}-preview" >
            ${element.root_.dataset.filterText}
        <svg class="acl-searchbox__filters-banner-item-close" viewBox="-3 -3 30 30">
            <path class="" fill="#1FACEC" stroke="none" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><path d="M0 0h24v24H0z" fill="none" />
        </svg>
    </div> `;
				});
			}

			if (selectedFilters.length > 2) {
				filterBannerResultsEl.innerHTML += `<div class="acl-searchbox__filters-more"> + ${selectedFilters.length -
					2} more</div>`;
				const searchboxFilterPreviewMore = searchboxEl.querySelector('.acl-searchbox__filters-more');
				searchboxFilterPreviewMore.addEventListener('click', function() {
					toggleFilterPanel();
					toggleDropdownListVisibility(searchboxEl);
					filterBannerEl.classList.add('acl-searchbox__filters-banner--hidden');
				});
			}

			let filterPreviewEls = searchboxEl.querySelectorAll('.acl-searchbox__filters-banner-item');

			for (const filterEl of filterPreviewEls) {
				filterEl.addEventListener('click', function(event) {
					selectedChips.filter(obj => {
						if (obj.selected == true && obj.id == event.target.dataset.filterId) {
							obj.selected = false;
							event.target.innerHTML = '';
						}
					});
					setSelectedFilterCount();
					setFilterBannerPreview();
					postFilterEventChanges(searchboxEl);
				});
			}
		}
	}

	closeAllLists() {
		/*close all autocomplete lists in the document,
except the one passed as an argument:*/
		var x = this.searchboxEl.getElementsByClassName('acl-autocomplete__items');

		for (var i = 0; i < x.length; i++) {
			x[i].parentNode.removeChild(x[i]);
		}
	}

	showDropdownList() {
		const dropdown = this.searchboxEl.querySelector('.acl-autocomplete__items');
		dropdown.classList.remove('acl-autocomplete__items--hidden');
	}

	setResults(updatedResults) {
		this.results = updatedResults;
		this.generateResults(this.searchValue);
	}

	generateResults(inputValue) {
		if (inputValue && this.resultsEl) {
			this.closeAllLists();
			this.resultCount = 0;

			var a,
				b,
				i,
				val = inputValue;
			this.currentFocus = -1;
			a = document.createElement('DIV');
			a.setAttribute('id', this.id + 'acl-autocomplete-list');
			a.setAttribute('class', 'acl-autocomplete__items');
			this.resultsEl.appendChild(a);

			for (i = 0; i < this.results.length; i++) {
				const searchTerm = `${this.results[i].primary.toUpperCase()} ${this.results[
					i
				].secondary.searchValue.toUpperCase()}`;

				if (searchTerm.includes(val.toUpperCase())) {
					b = document.createElement('DIV');
					b.classList.add('acl-autocomplete__item');
					b.setAttribute(
						'data-autocomplete-item-name',
						`${this.results[i].primary} ${this.results[i].secondary.searchValue}`
					);
					b.setAttribute('data-autocomplete-item-id', `${this.results[i].id}`);
					let ctaBtn = `<span class="acl-autocomplete__item-cta">View</span>`;

					if (!this.results[i].cta) {
						ctaBtn = '';
					}

					b.innerHTML += `<div class="acl-autocomplete__item-details">
<i class="aforza-icons acl-autocomplete__icon--${this.results[i].iconSize}" style="color: ${
						this.results[i].iconColour
					}">${this.results[i].icon}</i>
    <strong> ${this.results[i].primary} </strong>
         ${this.results[i].seperator ? '&nbsp;- ' : '&nbsp;'} ${this.results[i].secondary.displayValue}
 </div>
 ${ctaBtn}
`;
					a.appendChild(b);
					this.resultCount++;
				} else {
					var dropdownItems = this.searchboxEl.getElementsByClassName('acl-autocomplete__item');

					if (dropdownItems) {
						this.resultCount = dropdownItems.length;
					} else {
						this.resultCount = 0;
					}
				}
			}

			if (this.resultCount == 0) {
				b = document.createElement('DIV');
				b.classList.add('acl-autocomplete__item');
				b.innerHTML = `<div class="acl-autocomplete__no-results">There are no results matching your search</div>`;
				a.appendChild(b);
			} else {
				this.showDropdownList();
				this.filterButtonEl.classList.remove('acl-searchbox__filter-button--hidden', 'animated', 'fadeIn');
			}
		}
	}
}

export { ACLSearchboxSuggestions };