var autocomplete_inputBox = null;
var autocomplete_suggBox = null;
var autocomplete_icon = null;
var autocomplete_linkTag = null;

function applyAutocompleteSearchBar(autocomplete_searchWrapper_selector, suggestions) {

    autocomplete_searchWrapper = document.querySelector(autocomplete_searchWrapper_selector);
    autocomplete_inputBox = autocomplete_searchWrapper.querySelector("input");
    autocomplete_suggBox = autocomplete_searchWrapper.querySelector(".autocom-box");
    autocomplete_icon = autocomplete_searchWrapper.querySelector(".icon");
    autocomplete_linkTag = autocomplete_searchWrapper.querySelector("a");
    let webLink;

    // if user press any key and release
    autocomplete_inputBox.onkeyup = (e)=>{
        let userData = e.target.value; //user enetered data
        let emptyArray = [];
        if(userData){
            autocomplete_icon.onclick = ()=>{
                webLink = `https://www.google.com/search?q=${userData}`;
                autocomplete_linkTag.setAttribute("href", webLink);
                autocomplete_linkTag.click();
            }
            emptyArray = suggestions.filter((data)=>{
                //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
                return data.toLocaleLowerCase().includes(userData.toLocaleLowerCase());
            });
            emptyArray = emptyArray.map((data)=>{
                // passing return data inside li tag
                return data = `<li>${data}</li>`;
            });
            autocomplete_searchWrapper.classList.add("active"); //show autocomplete box
            showSuggestions(emptyArray);
            let allList = autocomplete_suggBox.querySelectorAll("li");
            for (let i = 0; i < allList.length; i++) {
                //adding onclick attribute in all li tag
                allList[i].setAttribute("onclick", "select(this)");
            }
        }else{
            autocomplete_searchWrapper.classList.remove("active"); //hide autocomplete box
        }
    }
}

function select(element){
    let selectData = element.textContent;
    autocomplete_inputBox.value = selectData;
    autocomplete_icon.onclick = ()=>{  
        onSearchBarClick(selectData);
    }
    autocomplete_searchWrapper.classList.remove("active");
    onSearchBarClick(selectData);
}

function showSuggestions(list, suggBox){
    let listData;
    if (!list.length) {
        userValue = autocomplete_inputBox.value;
        listData = `<li>${userValue}</li>`;
    } else {
      listData = list.join('');
    }
    autocomplete_suggBox.innerHTML = listData;
}