let txtBox = document.querySelector('.txtBox')
txtBox.focus()
let letterCloseButton = document.querySelector('.letter-close-button')
let startsWith = document.getElementById("startsWith");
let mustInclude = document.getElementById("mustInclude");
let endsWith = document.getElementById("endsWith");
let exculdeWith = document.getElementById("exculdeWith");
let inculdeWith = document.getElementById("inculdeWith");
let wordLength = document.getElementById("wordLength");
let textBoxes = document.querySelectorAll('.textBoxes');
let filterInputs = document.querySelectorAll('.filter_val');
let formElement = document.querySelector("#form");
let wordCount = document.querySelector(".wordCount");
let main = document.querySelector(".main");
let errorMsg = document.querySelector(".errorMsg");
let serachBtn = document.querySelector(".serachBtn")
let tab_container = document.querySelector(".tab_container");
let lengthSelect = document.querySelector(".length-select");
let getScript = document.currentScript;
let siteUrl = getScript.dataset.url;
let serachSection = document.querySelector(".serachSection");
let rangeOfBlankTile = serachSection.dataset.range;
let letterLen = serachSection.dataset.letter
let ablank = serachSection.dataset.ablank
let featureContainer = document.querySelector("#featureContainer")
let howContainer = document.querySelector("#howContainer")
let faqsContainer = document.querySelector("#faqsContainer")
let infographicsContainer = document.querySelector("#infographicsContainer")
let theSelect = document.getElementById("select_dropDown");
let sortingFilter = document.querySelector("#select_dropDown");
let sortup = document.querySelector(".sortup-icon");
let bool = false;
let authorsLists = document.querySelector(".authors-list")
let searchBtnContainer = document.querySelector(".search-btn-container")
let home_page_search_result
let homePageSearchResult
let sortValue;
let sortBool = false;
let ok = true;

let worker = new Worker('/assets/js/wordfinder-worker.js');

textBoxes.forEach(txtBox => {
    txtBox.addEventListener("input", () => {
        if (txtBox.value !== '') {
            txtBox.classList.add('blinkBoxShadow');
        } else {
            txtBox.classList.remove('blinkBoxShadow');
        }
    });

    txtBox.addEventListener('blur', () => {
        txtBox.classList.remove('blinkBoxShadow');
    });
});

txtBox.addEventListener('input', (e) => {
    if (e.target.value === "") {
        letterCloseButton.style.display = "none"
    }
    else {
        letterCloseButton.style.display = "block"
    }
    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
    let rangeOfBlankTile = 3
    if (rangeOfBlankTile === "") {
        rangeOfBlankTile = 3
    }
    e.target.value = e.target.value.replace(/ /g, '?')
    let data = []
    data = e.target.value.split('').filter((i) => i === '?')
    if (data.length > rangeOfBlankTile) {
        e.target.value = e.target.value.replace(/\?$/, '')
    }
})
letterCloseButton.addEventListener("click", () => {
    txtBox.value = ""
    letterCloseButton.style.display = "none"
})
Array.from(filterInputs).forEach((item) => {
    item.addEventListener("input", (e) => {
        const inputValue = e.target.value;
        const parentElement = e.target.parentElement;
        const imgElement = parentElement.querySelector('img');
        const tooltipElement = parentElement.querySelector('.filter-tooltip');

        if (inputValue == "") {
            imgElement.src = "/assets/images/questionmark.svg"
            setTimeout(() => {
                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
            }, 100);
            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');

        } else {
            item.nextElementSibling.removeAttribute("data-tip")
            imgElement.src = "/assets/images/close-btn.svg"
            tooltipElement.style.setProperty('--tooltip-padding', '0');
            tooltipElement.style.setProperty('--tooltip-border-style', 'none');
        }
    })

    item.nextElementSibling.addEventListener("click", () => {
        const parentElement = item.parentElement;
        const imgElement = parentElement.querySelector('img');
        const tooltipElement = parentElement.querySelector('.filter-tooltip');
        item.value = ""
        imgElement.src = "/assets/images/questionmark.svg"
        setTimeout(() => {
            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
        }, 100);
        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
        tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
    })
})
sortup.addEventListener("click", () => {
    if (bool) {
        theSelect.size = 0;
        bool = false;
        theSelect.style.display = "none";
    } else {
        bool = true;
        theSelect.size = 3;
        theSelect.style.display = "block";
    }
});
const getDiff = (text1, text2) => {
    var diffRange = [];
    var currentRange = undefined;
    for (var i = 0; i < text1.length; i++) {
        if (text1[i] != text2[i]) {
            if (currentRange == undefined) {
                currentRange = [i];
            }
        }
        if (currentRange != undefined && text1[i] == text2[i]) {
            currentRange.push(i);
            diffRange.push(currentRange);
            currentRange = undefined;
        }
    }
    if (currentRange != undefined) {
        currentRange.push(i);
        diffRange.push(currentRange);
    }
    return diffRange;
};
const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
    return new Promise((resolve, reject) => {
        let resourceEle;

        if (type === "text/javascript") {
            resourceEle = document.createElement("script");
            resourceEle.src = FILE_URL;
            resourceEle.classList.add("loaded-js");
        } else if (type === "text/css") {
            resourceEle = document.createElement("link");
            resourceEle.rel = "stylesheet";
            resourceEle.href = FILE_URL;
        } else {
            reject({
                status: false,
                message: `Unsupported resource type: ${type}`,
            });
            return;
        }

        resourceEle.type = type;
        resourceEle.async = async;

        Object.keys(data).forEach((key) => {
            resourceEle.setAttribute(`data-${key}`, data[key]);
        });

        resourceEle.addEventListener("load", () => {
            resolve({ status: true });
        });

        resourceEle.addEventListener("error", () => {
            reject({
                status: false,
                message: `Failed to load the resource ${FILE_URL}`,
            });
        });

        if (type === "text/javascript") {
            // console.log(resourceEle);
            // console.log(FILE_URL);
            document.body.appendChild(resourceEle);
        } else if (type === "text/css") {
            document.head.appendChild(resourceEle);
        }
    });
};
function sendPageViewEvent() {
    gtag('event', 'page_view', {
        page_location: window.location.pathname + location.search
    });
}
function logSubmit(e) {
    e.preventDefault();
    if (txtBox.value != "" || startsWith.value != "" || endsWith.value != "" || mustInclude.value != "" || exculdeWith.value != "" || inculdeWith.value != "" || wordLength.value != "") {
        if (featureContainer) {
            featureContainer.remove()
        }
        if (howContainer) {
            howContainer.remove()
        }
        if (faqsContainer) {
            faqsContainer.remove()
        }
        if (infographicsContainer) {
            infographicsContainer.remove()
        }
        if (authorsLists) {
            authorsLists.remove()
        }
        serachBtn.style.background = 'url(/assets/images/spinner.gif) no-repeat center center';
        main.innerHTML = `<main class="placeholder-loader">
        <ul class="o-vertical-spacing o-vertical-spacing--l">
          <li class="blog-post o-media">
            <div class="o-media__body">
              <div class="o-vertical-spacing">
                <p class="m-0">
                  <span class="skeleton-box" style="width:40%;"></span>
                </p>
              </div>
            </div>
          </li>
          <li class="blog-post o-media">
            <div class="o-media__figure">
              <span class="skeleton-box" style="width:900px;height:140px;"></span>
            </div>
          </li>
          <li class="blog-post o-media">
            <div class="o-media__figure">
              <span class="skeleton-box" style="width:900px;height:140px;"></span>
            </div>
          </li>
          <li class="blog-post o-media">
          <div class="o-media__figure">
            <span class="skeleton-box" style="width:900px;height:140px;"></span>
          </div>
        </li>
        </ul>
      </main>`;


        let quesMark = "?";
        if (rangeOfBlankTile) {
            if (!txtBox.value.includes("?")) {
                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile);
                txtBox.value = txtBox.value;
            }
        }

        if (ablank) {
            if (!txtBox.value.includes("?")) {
                if (txtBox.value.length <= letterLen || txtBox.value.length >= letterLen) {
                    txtBox.value = txtBox.value + '?'
                    txtBox.value = txtBox.value
                }
            }
        }

        document.querySelector(".fillterWrapper").classList.add("hide")
        let selectedDictionary = document.querySelector(".select_dropDown2").value;
        if (history.pushState) {
            var newurl =
                window.location.protocol +
                "//" +
                window.location.host +
                window.location.pathname +
                "?" +
                "search" +
                "=" +
                txtBox.value.toLowerCase() +
                "&" +
                "dictionary" +
                "=" +
                selectedDictionary +
                "&" +
                "prefix" +
                "=" +
                startsWith.value +
                "&" +
                "contains" +
                "=" +
                mustInclude.value +
                "&" +
                "suffix" +
                "=" +
                endsWith.value +
                "&" +
                "exclude" +
                "=" +
                exculdeWith.value +
                "&" +
                "include" +
                "=" +
                inculdeWith.value +
                "&" +
                "length" +
                "=" +
                wordLength.value;

            window.history.pushState({ path: newurl }, "", newurl);

            const params = new URLSearchParams(window.location.search);
            serachValue = params.get("search");
            prefixValue = params.get("prefix");
            containsValue = params.get("contains");
            suffixValue = params.get("suffix");
            exculdeValue = params.get("exclude");
            includeValue = params.get("include");
            lengthValue = params.get("length");
            dictonary = params.get("dictionary");

            getData(txtBox.value.toLowerCase())

            setTimeout(sendPageViewEvent, 0);
        }
        const paramName = 'search';
        if (new URLSearchParams(window.location.search).has(paramName)) {
            const additionalData = {}
            var loadJs = document.querySelector(".loaded-js");
            if (loadJs == null) {
                loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
                    .then((data) => {
                        console.log("CSS loaded:", data);
                    })
                    .catch((error) => {
                        console.error("Error loading CSS:", error);
                    });
            }
        }
    } else {
        console.log("Please Enter Valid Letters.");
    }
}

let selectedDictionary = document.querySelector(".select_dropDown2");
selectedDictionary.addEventListener("change", (e) => {
    logSubmit(e);
});
formElement.addEventListener("submit", logSubmit);
sortingFilter.addEventListener("change", logSubmit);

// getWords define
const getData = async (serachValue) => {
    try {
        let selectedDictionary = document.querySelector(".select_dropDown2").value;
        if (letterLen) {
            home_page_search_result = document.querySelector("#home_page_search_result")
            homePageSearchResult = `/?search=${serachValue}&dictionary=Dictionary&prefix=&contains=&suffix=&exculde=&inculde=&length=`;
        }
        document.querySelector(".main-header").style.background = "#fff"
        document.querySelector(".sortingFilters").style.display = "none"
        errorMsg.innerHTML = "";
        wordCount.innerHTML = "";

        if (serachValue) {
            serachValue = serachValue + startsWith.value.toLowerCase() + endsWith.value.toLowerCase() + mustInclude.value.toLowerCase() + inculdeWith.value.toLowerCase() + exculdeWith.value.toLowerCase()
        }

        const startTime = performance.now();

        worker.postMessage({
            type: "api",
            serachValue: serachValue,
            selectedDictionary: selectedDictionary,
            endpoint: `/.netlify/functions`
        });
        worker.onmessage = (event) => {
            main.innerHTML = "";
            serachBtn.style.background = 'url(/assets/images/search.svg) no-repeat center center';
            getWords(startTime, serachValue, event.data.data);
        }
    } catch (error) {
        console.log(error);
    }
};

let newUrl = window.location.href;
if (newUrl.includes("?")) {
    const params = new URLSearchParams(window.location.search);
    let serachValue = params.get("search").toLowerCase();
    let prefixValue = params.get("prefix");
    let containsValue = params.get("contains");
    let suffixValue = params.get("suffix");
    let exculdeValue = params.get("exclude");
    let includeValue = params.get("include");
    let lengthValue = params.get("length");
    let dictonary = params.get("dictionary");

    txtBox.value = serachValue
    startsWith.value = prefixValue
    mustInclude.value = containsValue
    endsWith.value = suffixValue
    exculdeWith.value = exculdeValue
    inculdeWith.value = includeValue
    wordLength.value = lengthValue
    document.querySelector(".select_dropDown2").value = dictonary
    logSubmit(new Event('submit'))
}
let previousDataIndex = null
let previousID = null;
let storepreviousIndex = []
let moreData = []
let data_index = 98;
function getWords(startTime, serachValue, data) {
    data_index = 98
    moreData = []
    storepreviousIndex = []
    main.innerHTML = "";
    lengthSelect.innerHTML = ""
    if (typeof data === "string") {
        const params = new URLSearchParams(window.location.search);
        errorMsg.innerHTML = "no words found";

        if (!letterLen) {
            let serachValue = params.get("search").toLowerCase();
            txtBox.value = serachValue + "?"
            logSubmit(new Event('submit'))
        }

    } else {
        
        worker.postMessage({
            type: 'filterwords',
            data: data,
            serachValue: serachValue,
            prefixValue: startsWith.value,
            containsValue: mustInclude.value,
            suffixValue: endsWith.value,
            exculdeValue: exculdeWith.value,
            includeValue: inculdeWith.value,
            lengthValue: wordLength.value,
            sortingFilter: sortingFilter.selectedIndex,
            dictonary: document.querySelector(".select_dropDown2").value
        });
        worker.onmessage = (event) => {
            if (event.data.type === "filterwords") {
                errorMsg.innerHTML = ""
                document.querySelector(".sortingFilters").style.display = "flex"
                let { prefixValue, containsValue, suffixValue, exculdeValue, includeValue, lengthValue, newdata, i, newWordsLength, result } = event.data
                moreData.push(newdata)
                if (prefixValue) {
                    startsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    startsWith.classList.add("tick");
                    startsWith.value = startsWith.value;
                }
                if (suffixValue) {
                    endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    endsWith.classList.add("tick");
                    endsWith.value = endsWith.value;
                }
                if (containsValue) {
                    mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    mustInclude.classList.add("tick");
                    mustInclude.value = mustInclude.value;
                }
                if (lengthValue) {
                    wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    wordLength.classList.add("tick");
                    wordLength.value = wordLength.value;
                }
                if (exculdeValue) {
                    exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    exculdeWith.classList.add("tick");
                    exculdeWith.value = exculdeWith.value;
                }
                if (includeValue) {
                    inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    inculdeWith.classList.add("tick");
                    inculdeWith.value = inculdeWith.value;
                }
                if (newdata.length === 0) {
                    main.innerHTML += "";
                } else {
                    if (result[0] !== undefined) {
                        if (wordLength.value) {
                            lengthSelect.style.display = "none"
                        } else {
                            var option = document.createElement("option");
                            option.text = `${i} Letter`;
                            option.value = i;
                            lengthSelect.setAttribute("onchange", `Filtering(${i})`)
                            lengthSelect.add(option);
                            lengthSelect.style.display = "block"
                        }
                        if (letterLen) {
                            home_page_search_result.href = homePageSearchResult
                            home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`
                        }

                        const endTime = performance.now();
                        const timeTaken = endTime - startTime; // Calculate time taken in milliseconds
            
                        // Log the time taken
                        console.log(`Time taken by worker: ${timeTaken.toFixed(2)} ms`);

                        main.innerHTML += `
                    <div class="allGroupWords wordlistContainer" id="alpha_${i}">
                        <h3 class="wordListHeading lead">${i} Letter Words</h3>
                           <div class="wordList">${result.join("")}</div>
                         <div class="w-100 text-center btn-container">
                            <button   
                                style="background: black;
                                padding: 1rem 2rem;
                                border-radius: 50px;
                                color: #fff;
                                font-size: 15px;
                                border: none;"
                                onclick="showMoreWords(this)" type="button" class="my-4 showmore_btn" id="${i}">More Words</button>
                          </div>
    
                    </div>`
                        showMoreLimit()

                    }
                }
                if (newWordsLength === 0) {
                    errorMsg.innerHTML = "No Words Found";
                    document.querySelector(".sortingFilters").style.display = "none"
                } else {
                    if (txtBox.value) {
                        wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${txtBox.value.split("")}</strong>`;
                    } else {
                        let startwithMsg = ""
                        let endwithMsg = ""
                        let containsMsg = ""
                        let lengthMsg = ""
                        let inputVal = ""
                        if (txtBox.value) {
                            inputVal = `${input.value.split("")} `
                        }
                        if (prefixValue) {
                            startwithMsg = `starting with  ${prefixValue.split("")}`
                        }
                        if (suffixValue) {
                            endwithMsg = `ending with ${suffixValue.split("")} `
                        }
                        if (containsValue) {
                            containsMsg = `containing with  ${containsValue.split("")} `
                        }
                        if (lengthValue) {
                            lengthMsg = `with ${lengthValue} letter words`
                        }
                        let msg = `<strong> Found ${newWordsLength} words with letters
                              ${lengthMsg} ${inputVal} ${startwithMsg} ${endwithMsg} ${containsMsg} </strong>`

                        wordCount.innerHTML = `${msg} `
                    }
                }
            }
        }
    }
}
async function getMoreWords() {
    let flattenedArray = moreData.flat();
    let uniqueArray = [...new Set(flattenedArray)];;
    return uniqueArray
}
async function showMoreWords(e) {
    try {
        let showmore = e.parentElement.children[0];
        let id = showmore.id;

        if (previousID !== null && parseInt(previousID) !== parseInt(id)) {
            data_index = 98
            const filteredIndexes = storepreviousIndex.filter(item => item.id === id);
            if (filteredIndexes.length > 0) {
                const lastItem = filteredIndexes[filteredIndexes.length - 1];
                data_index = lastItem.data_index + 98;
                lastItem.data_index = data_index;
            }
        }
        previousID = id;
        storepreviousIndex.push({
            data_index,
            id
        })
        console.log("Current data_index:", data_index);
        document.getElementById(id).innerHTML = `Loading...`;
        let content_area = document.getElementById("alpha_" + id).getElementsByClassName("wordList")[0];
        const result = await getMoreWords();
        let full_words = result.filter((item) => item.length === Number(id));

        if (data_index < full_words.length) {
            for (let d = data_index; d < data_index + 98; d++) {
                if (full_words[d] != undefined) {
                    let itemHtml = "";
                    let points
                    let ScrabbleLetterScore = ScrabbleScore();

                    if (serachValue) {
                        serachValue = serachValue + startsWith.value.toLowerCase() + endsWith.value.toLowerCase() + mustInclude.value.toLowerCase() + inculdeWith.value.toLowerCase() + exculdeWith.value.toLowerCase()
                    }
                    if (serachValue) {
                        var text1 = serachValue.replace("?", "");
                        var text2 = full_words[d];
                        var text3 = full_words[d];
                        let chars = text1.split("");
                        let indexs = [];
                        chars.map((i) => {
                            let findIndexes = findIndex(text3, i);
                            if (findIndexes.length > 0) {
                                text3 = text3.split("");
                                text3[findIndexes] = "$";
                                text3 = text3.join("");
                                indexs = [...indexs, ...findIndexes];
                            }
                        });
                        let n1 = false
                        text2.split("").map((itemValue, index) => {
                            let check = indexs.find((i) => i === index);
                            if (check !== undefined) {
                                itemHtml += `${itemValue}`;
                                n1 = true
                            } else {
                                itemHtml += `<span class='highlight'>${itemValue}</span>`;
                            }
                        });
                        if (n1 == true) {
                            let parsedText = itemHtml.replace(/<span[^>]*>.*?<\/span>/g, '');
                            // console.log(parsedText);
                            points = 0
                            for (let i = 0; i < parsedText.length; i++) {
                                points += ScrabbleLetterScore[parsedText[i]] || 0; // for unknown characters
                            }
                        }
                    } else {
                        itemHtml = full_words[d]
                        points = 0;
                        for (let i = 0; i < full_words[d].length; i++) {
                            points += ScrabbleLetterScore[full_words[d][i]] || 0; // for unknown characters
                        }
                    }

                    full_words[d] = full_words[d].toLowerCase();
                    let span = document.createElement("span");
                    span.setAttribute("class", "points");
                    span.setAttribute("value", `${points}`);
                    span.innerHTML = `${points}`;

                    let a = document.createElement("a");
                    a.setAttribute("class", "anchor__style");
                    a.setAttribute("target", "_blank");
                    a.setAttribute("href", "/word-meaning?search=" + full_words[d].replace(/<\/?[^>]+>/gi, ''));
                    a.setAttribute("data-original-title", `Lookup ${full_words[d].replace(/<\/?[^>]+>/gi, '')} in Dictionary`)
                    a.innerHTML = ` ${itemHtml} `;
                    a.appendChild(span)
                    content_area.appendChild(a);
                }
            }
            document.getElementById(id).innerHTML = `More Words`;
            data_index += 98;
        } else {
            document.getElementById(id).style.display = "none";
        }
    } catch (error) {
        console.error("Error fetching or processing data:", error);
    }
}
const ScrabbleScore = (dictonary) => {
    let twl06_sowpods = {
        a: 1,
        e: 1,
        i: 1,
        o: 1,
        u: 1,
        l: 1,
        n: 1,
        r: 1,
        s: 1,
        t: 1,
        d: 2,
        g: 2,
        b: 3,
        c: 3,
        m: 3,
        p: 3,
        f: 4,
        h: 4,
        v: 4,
        w: 4,
        y: 4,
        k: 5,
        j: 8,
        x: 8,
        q: 10,
        z: 10,
    };
    let wwfScore = {
        a: 1,
        b: 4,
        c: 4,
        d: 2,
        e: 1,
        f: 4,
        g: 3,
        h: 3,
        i: 1,
        j: 10,
        k: 5,
        l: 2,
        m: 4,
        n: 2,
        o: 1,
        p: 4,
        q: 10,
        r: 1,
        s: 1,
        t: 1,
        u: 2,
        v: 5,
        w: 4,
        x: 8,
        y: 3,
        z: 10,
    };

    if (dictonary === "wwf") {
        return wwfScore;
    } else {
        return twl06_sowpods;
    }
};
function showMoreLimit() {
    let tableFooter = document.querySelectorAll(".btn-container")
    let showmore = document.querySelectorAll(".showmore_btn");
    for (let i = 0; i < showmore.length; i++) {
        let data_of_button = document.getElementById("alpha_" + showmore[i].getAttribute("id"));
        let final_data = data_of_button.getElementsByClassName("anchor__style");
        if (final_data.length < 98) {
            tableFooter[i].style.display = "none";
        }
    }
}
window.onscroll = function () {
    var section = document.querySelectorAll(".wordlistContainer");
    let new_sections = {};
    Array.prototype.forEach.call(section, function (e) {
        if (document.body.clientWidth > 991) {
            new_sections[e.id] = e.offsetTop - 10;
        } else {
            new_sections[e.id] = e.offsetTop - 10;
        }
    });
    var scrollPosition =
        document.documentElement.scrollTop || document.body.scrollTop;
    for (i in new_sections) {
        let sort_val = document.querySelector(".sort-select").value;
        if (
            i.split("_")[0] == sort_val &&
            new_sections[i] &&
            new_sections[i] <= scrollPosition
        ) {
            // document.querySelector(".active-tab").classList.remove("active-tab");
            // var active_now = document.querySelector("#Tab_" + i.split("_")[1]);
            // active_now.classList.add("active-tab");
            // active_now.scrollIntoView({ block: "nearest" });
        }
    }
};
let sections = {};
function Filtering(id) {
    id = lengthSelect.value

    let tabs = document.getElementsByClassName("tab_link");
    tabs[0] ? tabs[0].classList.add("active-tab") : "";

    Array.from(tabs).map((item) => {
        item.classList.remove("active-tab");
    });
    main.innerHTML += ``;
    let activeLetter = event.target;
    activeLetter.classList.add("active-tab");

    var section = document.querySelectorAll(".allGroupWords");
    var sort_val = "alpha";
    Array.prototype.forEach.call(section, function (e) {
        if (document.body.clientWidth > 991) {
            sections[e.id] = e.offsetTop - 10;
        } else {
            sections[e.id] = e.offsetTop - 10;
        }
    });
    document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;

    setTimeout(() => {
        document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;
    }, 150);
}
function findIndex(str, char) {
    const strLength = str.length;
    const indexes = [];
    let newStr = str;

    while (newStr && newStr.indexOf(char) > -1) {
        indexes.push(newStr.indexOf(char) + strLength - newStr.length);
        newStr = newStr.substring(newStr.indexOf(char) + 5);
        newStr = newStr.substring(newStr.indexOf(char) + 5);
    }

    return indexes;
}