/***************
 SCRABBLER_JS
***************/
const getScript = document.currentScript;
let form = document.querySelector("#form");
let wordCount = document.querySelector(".wordCount");
let main = document.querySelector(".main");
// let loader = document.querySelector(".main-loader")
let errorMsg = document.querySelector(".errorMsg");
let script = document.currentScript;

// getqueryUrl from form
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");

// advanced filter element grabs
let tick;
let startsWith = document.getElementById("startsWith");
let mustInclude = document.getElementById("mustInclude");
console.log(mustInclude);
let endsWith = document.getElementById("endsWith");
let exculdeWith = document.getElementById("exculdeWith");
let inculdeWith = document.getElementById("inculdeWith");
let wordLength = document.getElementById("wordLength");


let ok = true;

let tab_container = document.querySelector(".tab_container");
let lengthSelect = document.querySelector(".length-select");
const siteUrl = getScript.dataset.url;
var sortValue;
var sortBool = false;

let letterCloseButton = document.querySelector(
    ".letter-close-button-commonPage"
);
if (serachValue) {
    letterCloseButton.classList.add("ltr-cls-btn-commonPage");
}
letterCloseButton.addEventListener("click", () => {
    txtBox.value = "";
    letterCloseButton.classList.remove("ltr-cls-btn-commonPage");
});

let txtBox = document.querySelector(".txtBox");
txtBox.focus();
txtBox.value = serachValue;

txtBox.addEventListener("input", (e) => {
    if (e.target.value === "") {
        letterCloseButton.classList.remove("ltr-cls-btn-commonPage");
    } else {
        letterCloseButton.classList.add("ltr-cls-btn-commonPage");
    }
    let rangeOfBlankTile = script.dataset.range;
    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "");
    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(/\?$/, "");
    }
});

function mobileScrollTop(x) {
    if (x.matches) {
        console.log(x.matches);
        txtBox.addEventListener("click", () => {
            document.documentElement.scrollTop = 350;
            setTimeout(() => {
                document.documentElement.scrollTop = 350;
            }, 300);
        });
    } else {
        console.log("false");
    }
}
var x = window.matchMedia("(max-width: 768px)");
// mobileScrollTop(x);
// x.addListener(mobileScrollTop);

let rangeOfBlankTile = script.dataset.range;
let quesMark = "?";

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

const filterInputs = document.querySelectorAll('.filter_val');
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"
            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
            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", () => {
            e.target.value = ""
            imgElement.src = "/assets/images/questionmark.svg"
            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
        })
    })
})


function handleFilterInput(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"
        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
    } else {
        e.target.nextElementSibling.removeAttribute("data-tip")
        imgElement.src = "/assets/images/close-btn.svg"
        tooltipElement.style.setProperty('--tooltip-padding', '0');
        tooltipElement.style.setProperty('--tooltip-border-style', 'none');
    }

    e.target.nextElementSibling.addEventListener("click", () => {
        e.target.value = ""
        imgElement.src = "/assets/images/questionmark.svg"
        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
    });
}

document.addEventListener("DOMContentLoaded", () => {
  const filterInputs = document.querySelectorAll('.filter_val');
    Array.from(filterInputs).forEach((item) => {
        // Call the function on load
        handleFilterInput({ target: item });
        item.addEventListener("input", handleFilterInput);
    });
});




let theSelect = document.getElementById("select_dropDown");

const sortup = document.querySelector(".sortup-icon");
let bool = false;
sortup.addEventListener("click", () => {
    if (bool) {
        theSelect.size = 0;
        bool = false;
        theSelect.style.display = "none";
    } else {
        bool = true;
        theSelect.size = 3;
        theSelect.style.display = "block";
    }
});
document.querySelector(".select_dropDown2").value = dictonary;
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;
};

// getWords define...
const getData = async (serachValue) => {
    try {
        errorMsg.innerHTML = "";
        wordCount.innerHTML = "";
        let selectedDictionary = document.querySelector(".select_dropDown2").value;
        main.innerHTML = `<div class="loader">
    <img src='/assets/images/loading.gif'>
    <div style="font-weight:900;font-size:14px" >Finding words - Powered by ${siteUrl.replace(
            /^https?:\/\//,
            ""
        )}</div>
    </div>`;
        /// loader
        const response = await fetch(
            `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
        );
        const data = await response.json();
        main.innerHTML = "";
        getWords(data);
        //getWords calling...
    } catch (error) {
        console.log(error);
    }
};
//getData calling...
if (lengthValue === "1") {
    errorMsg.innerHTML = "words length should be more than 1";
} else {
    getData(serachValue.toLowerCase());
    function logSubmit(event) {
        document.querySelector(".fillterWrapper").classList.add("hide")


        const scrollingElement = document.scrollingElement || document.body;
        scrollingElement.scroll({ top: 0, behavior: "smooth" });
        if (rangeOfBlankTile) {
            if (!txtBox.value.includes("?")) {
                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
            }
        }

        let selectedDictionary = document.querySelector(".select_dropDown2").value;
        event.preventDefault();
        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");

            gtag("event", "page_view", {
                page_location: window.location.pathname + location.search,
            });
        }
        getData(txtBox.value.toLowerCase());
        // addFilterCount();
    }

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

// getWords function define...
function getWords(data) {
    main.innerHTML = "";
    // tab_container.innerHTML = "";
    lengthSelect.innerHTML = ""
    if (typeof data === "string") {
        errorMsg.innerHTML = "no words found";
        wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
            ""
        )}</strong>`;
    } else {
        let newWordsLength = 0;
        let dataArr = [];
        for (let i = serachValue.length; i >= 1; i--) {
            let newdata = data.filter((item) => item.length === i);
            if (prefixValue) {
                newdata = newdata.filter((item2) =>
                    item2.startsWith(prefixValue.toLowerCase())
                );
                startsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                startsWith.classList.add("tick");
                startsWith.value = prefixValue;
            } else {
                startsWith.classList.remove("tick");
            }
            if (containsValue) {
                newdata = newdata.filter((item) =>
                    item.includes(containsValue.toLowerCase())
                );
                mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                mustInclude.classList.add("tick");
                mustInclude.value = containsValue;
            } else {
                mustInclude.classList.remove("tick");
            }
            if (suffixValue) {
                newdata = newdata.filter((item) =>
                    item.endsWith(suffixValue.toLowerCase())
                );
                endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                endsWith.classList.add("tick");
                endsWith.value = suffixValue;
            } else {
                endsWith.classList.remove("tick");
            }
            if (exculdeValue) {
                let data = [];
                newdata.map((item) => {
                    let check = false;
                    for (let e = 0; e < exculdeValue.length; e++) {
                        const element = exculdeValue[e].toLowerCase();
                        if (item.includes(element)) {
                            check = true;
                            break;
                        } else {
                            check = false;
                        }
                    }
                    if (check === false) {
                        data.push(item);
                    }
                });
                exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                exculdeWith.classList.add("tick");
                exculdeWith.value = exculdeValue;
                newdata = data;
            } else {
                exculdeWith.classList.remove("tick");
            }
            if (includeValue) {
                let data = [];
                newdata.map((item) => {
                    let check = false;
                    for (let e = 0; e < includeValue.length; e++) {
                        const element = includeValue[e].toLowerCase();
                        if (!item.includes(element)) {
                            check = true;
                            break;
                        } else {
                            check = false;
                        }
                    }
                    if (check === false) {
                        data.push(item);
                    }
                });
                inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                inculdeWith.classList.add("tick");
                inculdeWith.value = includeValue;
                newdata = data;
            } else {
                inculdeWith.classList.remove("tick");
            }
            if (lengthValue) {
                newdata = newdata.filter((item) => item.length == lengthValue);
                wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                wordLength.classList.add("tick");
                wordLength.value = lengthValue;
            } else {
                wordLength.classList.remove("tick");
            }
            if (newdata.length === 0) {
                main.innerHTML += "";
            } else {
                newWordsLength += newdata.length;
                const result = newdata.map((item) => {
                    var text1 = serachValue.replace("?", "");
                    var text2 = item;
                    var text3 = item;
                    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 itemHtml = "";
                    text2.split("").map((itemValue, index) => {
                        let check = indexs.find((i) => i === index);

                        if (check !== undefined) {
                            itemHtml += `${itemValue}`;
                        } else {
                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
                        }
                    });

                    if (item.length === 1) {
                        ok = false;
                        newWordsLength = newWordsLength - 1;
                    } else {
                        let ScrabbleLetterScore = ScrabbleScore();
                        sum = 0;
                        item = item.toLowerCase();
                        for (let i = 0; i < item.length; i++) {
                            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                        }
                        dataArr.push(item);
                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
            <li>${itemHtml}
          <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
            </li></a>`;
                    }
                });

                if (result[0] !== undefined) {
                    var option = document.createElement("option");
                    option.text = `${i} Letter`;
                    option.value = i;
                    lengthSelect.setAttribute("onchange", `Filtering(${i})`)
                    lengthSelect.add(option);

                    //             tab_container.innerHTML += `
                    //   <input type="button" id="Tab_${i}" onclick="Filtering(${i})" value="${i} Letter"
                    //   class="tab_link  cursorPointer" />
                    //   `;
                    //             let tabs = document.getElementsByClassName("tab_link");
                    //             tabs[0] ? tabs[0].classList.add("active-tab") : "";
                    main.innerHTML += `
          <div class="allGroupWords wordlistContainer" id="alpha_${i}">
              <div class="wordListHeading">
                  <h3 class="lead">${i} Letter Words</h3>
              </div>
              <div class="wordList">
                  <ul class="ul list-unstyled">
                   ${result.join("")}
                  </ul>
              </div>
          </div>
          `;
                }
            }
        }
        theSelect.addEventListener("change", () => {
            sortValue = theSelect[theSelect.selectedIndex].text;
            if (sortValue == "Z-A") {
                sortBool = true;
                sortby(sortBool, dataArr);
            } else {
                sortBool = false;
                sortby(sortBool, dataArr);
            }
            if (sortValue == "Points") {
                sortBool = true;
                sortPointsby(sortBool, dataArr);
            }
        });
        sortValue = theSelect[theSelect.selectedIndex].text;
        if (sortValue == "Z-A") {
            sortby(sortBool, dataArr);
        }
        if (sortValue == "Points") {
            sortPointsby(sortBool, dataArr);
        }
        if (newWordsLength === 0) {
            errorMsg.innerHTML = "no words found";
        } else {
            wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split(
                ""
            )}</strong>`;
        }
    }
}

// sorting by points
function sortPointsby(sortValue, data) {
    main.innerHTML = "";
    if (sortValue) {
        let newWordsLength = 0;
        for (let i = serachValue.length; i >= 1; i--) {
            var newdata = data.filter((item) => item.length === i);
            if (newdata.length === 0) {
                main.innerHTML += "";
            } else {
                newWordsLength += newdata.length;
                var newArray = [];
                newdata.map((item) => {
                    if (item.length === 1) {
                        ok = false;
                        newWordsLength = newWordsLength - 1;
                    } else {
                        let ScrabbleLetterScore = ScrabbleScore();
                        let points = 0;
                        item = item.toLowerCase();
                        for (let i = 0; i < item.length; i++) {
                            points += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                        }
                        const value = {
                            words: item,
                            points: points,
                        };
                        newArray.push(value);
                    }
                });

                newArray.sort(function (a, b) {
                    return b.points - a.points;
                });
                const result = newArray.map((item) => {
                    var text1 = serachValue.replace("?", "");
                    var text2 = item.words;
                    var text3 = item.words;
                    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) + 1);
                            newStr = newStr.substring(newStr.indexOf(char) + 1);
                        }
                        return indexes;
                    }
                    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 itemHtml = "";
                    text2.split("").map((itemValue, index) => {
                        let check = indexs.find((i) => i === index);
                        if (check !== undefined) {
                            itemHtml += `${itemValue}`;
                        } else {
                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
                        }
                    });
                    return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
          <li>${itemHtml}
        <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
          </li></a>`;
                });

                main.innerHTML += `
        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
            <div class="wordListHeading">
                <h3 class="lead">${i} Letter Words</h3>
            </div>
            <div class="wordList">
                <ul class="ul list-unstyled">
                 ${result.join("")}
                </ul>
            </div>
        </div>
        `;
            }
        }
    }
}
// sort by aplhabets
function sortby(sortBool, data) {
    if (sortBool) {
        main.innerHTML = "";
        data.reverse();
        let newWordsLength = 0;
        for (let i = serachValue.length; i >= 1; i--) {
            var newdata = data.filter((item) => item.length === i);

            if (newdata.length === 0) {
                main.innerHTML += "";
            } else {
                newWordsLength += newdata.length;

                const result = newdata.map((item) => {
                    var text1 = serachValue.replace("?", "");
                    var text2 = item;
                    var text3 = item;
                    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 itemHtml = "";
                    text2.split("").map((itemValue, index) => {
                        let check = indexs.find((i) => i === index);
                        if (check !== undefined) {
                            itemHtml += `${itemValue}`;
                        } else {
                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
                        }
                    });
                    if (item.length === 1) {
                        ok = false;
                        newWordsLength = newWordsLength - 1;
                    } else {
                        let ScrabbleLetterScore = ScrabbleScore();
                        let sum = 0;
                        item = item.toLowerCase();
                        for (let i = 0; i < item.length; i++) {
                            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                        }

                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
            <li>${itemHtml}
        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
          </li></a>`;
                    }
                });

                main.innerHTML += `
        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
            <div class="wordListHeading">
                <h3 class="lead">${i} Letter Words</h3>
            </div>
            <div class="wordList">
                <ul class="ul list-unstyled">
                 ${result.join("")}
                </ul>
            </div>
        </div>
        `;
            }
        }
    } else {
        main.innerHTML = "";
        data.sort();
        for (let i = serachValue.length; i >= 1; i--) {
            var newdata = data.filter((item) => item.length === i);
            if (newdata.length === 0) {
                main.innerHTML += "";
            } else {
                const result = newdata.map((item) => {
                    var text1 = serachValue.replace("?", "");
                    var text2 = item;
                    var text3 = item;
                    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 itemHtml = "";
                    text2.split("").map((itemValue, index) => {
                        let check = indexs.find((i) => i === index);
                        if (check !== undefined) {
                            itemHtml += `${itemValue}`;
                        } else {
                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
                        }
                    });
                    if (item.length === 1) {
                        ok = false;
                    } else {
                        let ScrabbleLetterScore = ScrabbleScore();
                        let sum = 0;
                        item = item.toLowerCase();
                        for (let i = 0; i < item.length; i++) {
                            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                        }

                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
            <li>${itemHtml}
        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
          </li></a>`;
                    }
                });
                main.innerHTML += `
        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
            <div class="wordListHeading">
                <h3 class="lead">${i} Letter Words</h3>
            </div>
            <div class="wordList">
                <ul class="ul list-unstyled">
                 ${result.join("")}
                </ul>
            </div>
        </div>
        `;
            }
        }
    }
}

// Scrabble Point Array
const ScrabbleScore = () => {
    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;
    }
};

// handling of filter on scroll
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" });
        }
    }
};

// Add Filtering
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);
}

// next && previous functionality
let prev = document.getElementById("prev");
let next = document.getElementById("next");

if (prev) {
    prev.onclick = scroll_Right;
}
if (next) {
    next.onclick = scroll_Left;
}
window.addEventListener("resize", function () {
    scroll_visible();
});
window.addEventListener("scroll", function () {
    scroll_visible();
});
function scroll_visible() {
    let tab_container = document.querySelector("#tab-container");
    if (tab_container) {
        if (tab_container.clientWidth === tab_container.scrollWidth) {
            prev.style.display = "none";
            next.style.display = "none";
        } else {
            prev.style.display = "block";
            next.style.display = "block";
        }
    }
}
scroll_visible();

function scroll_Left() {
    tab_container.scrollLeft += 130;
}
function scroll_Right() {
    tab_container.scrollLeft -= 130;
}
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;
}