class ACLSearchboxSuggestions {
    constructor(suggestions, filters) {
        this.suggestions = suggestions;
        this.filters = filters;
        this.filterChips = '';
    }

    autocomplete(inp, arr, filters) {
        var currentFocus;
        let chipSet;
        let allChips;
        let selectedChips;
        let filterCount;
        const filterButtonEl = document.querySelector('.acl-searchbox__filter-button');
        const closeFiltersButtonEl = document.querySelector('.acl-searchbox__filters-close');
        const filterBannerEl = document.querySelector('.acl-searchbox__filters-banner');
        const filterBannerResultsEl = document.querySelector('.acl-searchbox__filters-banner-preview');
        const selectedFilterCountLabel = document.querySelector('.acl-searchbox__filter-selected-count');
        const resultsEl = document.querySelector('.acl-searchbox__results');
        const filterPanel = document.querySelector('.acl-searchbox__filters-chips');
        const searchboxHeader = document.querySelector('.acl-searchbox__header');
        const searchboxFilters = document.querySelector('.acl-searchbox__filters');

        closeFiltersButtonEl.addEventListener('click', function() {
            toggleFilterPanel();
            filterBannerEl.classList.remove('acl-searchbox__filters-banner--hidden');
        });

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

        addFilters(filters);

        /*execute a function when someone writes in the text field:*/
        inp.addEventListener('input', function(e) {
            var a,
                b,
                i,
                val = this.value;

            /*close any already open lists of autocompleted values*/
            closeAllLists();

            if (!val) {
                return false;
            } else if (val.length > 2) {
                currentFocus = -1;
                /*create a DIV element that will contain the items (values):*/
                a = document.createElement('DIV');
                a.setAttribute('id', this.id + 'acl-autocomplete-list');
                a.setAttribute('class', 'acl-autocomplete__items');

                /*append the DIV element as a child of the autocomplete container:*/
                resultsEl.appendChild(a);

                resultsEl.addEventListener('click', function(e) {
                    let autocompleteText = e.target.dataset.autocompleteItemName;
                    if (autocompleteText) {
                        inp.value = e.target.dataset.autocompleteItemName;
                    }
                });

                /*for each item in the array...*/
                for (i = 0; i < arr.length; i++) {
                    if (
                        arr[i].primary.toUpperCase().includes(val.toUpperCase()) ||
                        arr[i].secondary.toUpperCase().includes(val.toUpperCase())
                    ) {
                        /*create a DIV element for each matching element:*/
                        b = document.createElement('DIV');
                        b.classList.add('acl-autocomplete__item');
                        b.setAttribute('data-autocomplete-item-name', `${arr[i].primary} ${arr[i].secondary}`);
                        b.setAttribute('data-autocomplete-item-id', `${arr[i].id}`);
                        //b.setAttribute();
                        b.innerHTML += `<i class="material-icons">${arr[i].icon}</i> <strong>${arr[i].primary} </strong> - ${arr[i].secondary}`;
                        a.appendChild(b);
                    } else {
                        b = document.createElement('DIV');
                        b.classList.add('acl-autocomplete__item');
                        //b.setAttribute("data-autocomplete-item-name", `${arr[i].primary} ${arr[i].secondary}`);

                        //b.setAttribute();
                        b.innerHTML = `No results`;
                        a.appendChild(b);
                        break;
                    }
                }
            }
        });
        /*execute a function presses a key on the keyboard:*/
        inp.addEventListener('keydown', function(e) {
            var x = document.getElementById(this.id + 'acl-autocomplete-list');
            if (x) x = x.getElementsByTagName('div');
            if (e.keyCode == 40) {
                /*If the arrow DOWN key is pressed,
                increase the currentFocus variable:*/
                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:*/
                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 (currentFocus > -1) {
                    /*and simulate a click on the "active" item:*/
                    if (x) {
                        x[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 (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = x.length - 1;
            /*add class "autocomplete-active":*/
            x[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 closeAllLists(elmnt) {
            /*close all autocomplete lists in the document,
            except the one passed as an argument:*/
            var x = document.getElementsByClassName('acl-autocomplete__items');
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != inp) {
                    x[i].parentNode.removeChild(x[i]);
                }
            }
        }
        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>`;
                }
                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(document.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');
            } else {
                selectedFilterCountLabel.classList.remove('acl-searchbox__filter-selected-count--visible');
                filterBannerEl.classList.add('acl-searchbox__filters-banner--hidden');
            }
        }

        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 = document.querySelector('.acl-searchbox__filters-more');

                    searchboxFilterPreviewMore.addEventListener('click', function() {
                        toggleFilterPanel();
                        filterBannerEl.classList.add('acl-searchbox__filters-banner--hidden');
                    });
                }
            }

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

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

        document.addEventListener('click', function(e) {
            closeAllLists(e.target);
        });
    }
}

export { ACLSearchboxSuggestions };