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

// 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 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 featureContainer = document.querySelector("#featureContainer")
let howContainer = document.querySelector("#howContainer")
let faqsContainer = document.querySelector("#faqsContainer")
let infographicsContainer = document.querySelector("#infographicsContainer")
txtBox.value = serachValue;

let theSelect = document.getElementById("select_dropDown");
let sortingFilter = document.querySelector("#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;
};

let authorsLists = document.querySelector(".authors-list")

// getWords define...
const getData = async (serachValue) => {
    try {
        document.querySelector(".main-header").style.background = "#fff"
        document.querySelector(".heading-h2").style.display = "none"
        document.querySelector(".sortingFilters").style.display = "none"
        if (featureContainer) {
            featureContainer.remove()
        }
        if (howContainer) {
            howContainer.remove()
        }
        if (faqsContainer) {
            faqsContainer.remove()
        }
        if (infographicsContainer) {
            infographicsContainer.remove()
        }
        if (authorsLists) {
            authorsLists.remove()
        }
        errorMsg.innerHTML = "";
        wordCount.innerHTML = "";
        let selectedDictionary = document.querySelector(".select_dropDown2").value;
        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>`;
        /// loader
        let response
        if (serachValue) {
            response = await fetch(`/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`);
        } else {
            response = await fetch(`/.netlify/functions/getData?&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);
    sortingFilter.addEventListener("change", logSubmit);
}


let previousDataIndex = null
let previousID = null;
let storepreviousIndex = []
let moreData = []
let data_index = 25;
function getWords(data) {
    data_index = 25
    moreData = []
    storepreviousIndex =[]
    main.innerHTML = "";
    lengthSelect.innerHTML = ""
    document.querySelector(".sortingFilters").style.display = "flex"
    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 = 15; i > 0; 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.nextElementSibling.removeAttribute("data-tip")
                startsWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
                startsWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                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.nextElementSibling.removeAttribute("data-tip")
                mustInclude.nextElementSibling.style.setProperty('--tooltip-padding', '0');
                mustInclude.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                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.nextElementSibling.removeAttribute("data-tip")
                endsWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
                endsWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                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.nextElementSibling.removeAttribute("data-tip")
                exculdeWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
                exculdeWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                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.nextElementSibling.removeAttribute("data-tip")
                inculdeWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
                inculdeWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                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.nextElementSibling.removeAttribute("data-tip")
                wordLength.nextElementSibling.style.setProperty('--tooltip-padding', '0');
                wordLength.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                wordLength.classList.add("tick");
                wordLength.value = lengthValue;
            } else {
                wordLength.classList.remove("tick");
            }
            if (newdata.length === 0) {
                main.innerHTML += "";
            } else {
                newWordsLength += newdata.length;
                newdata = sortWords(newdata);
                moreData.push(newdata)
                let result = newdata.map((item) => {
                    let itemHtml = "";
                    if (serachValue) {
                        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];
                            }
                        });
                        text2.split("").map((itemValue, index) => {
                            let check = indexs.find((i) => i === index);
                            if (check !== undefined) {
                                itemHtml += `${itemValue}`;
                            } else {
                                itemHtml += `<span class='highlight'>${itemValue}</span>`;
                            }
                        });
                    } else {
                        itemHtml = item
                    }
                    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()}">
                        ${itemHtml}
                        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px">${sum}</span>
                        </a>
                        `;
                    }
                });
                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"
                    }

                    result = result.slice(0, 25)

                    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 (serachValue) {
                wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split("")}</strong>`;
            } else {

                let startwithMsg = ""
                let endwithMsg = ""
                let containsMsg = ""
                let lengthMsg = ""
                let inputVal = ""
                if (serachValue) {
                    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)];
    // console.log(uniqueArray);
    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 = 25
            console.log(storepreviousIndex);
            const filteredIndexes = storepreviousIndex.filter(item => item.id === id);
            if (filteredIndexes.length > 0) {
                const lastItem = filteredIndexes[filteredIndexes.length - 1];
                data_index = lastItem.data_index + 25;
                lastItem.data_index = data_index;
            }
            console.log(filteredIndexes);

        }
        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 + 25; d++) {
                if (full_words[d] != undefined) {
                    let itemHtml = "";
                    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];
                            }
                        });
                        text2.split("").map((itemValue, index) => {
                            let check = indexs.find((i) => i === index);
                            if (check !== undefined) {
                                itemHtml += `${itemValue}`;
                            } else {
                                itemHtml += `<span class='highlight'>${itemValue}</span>`;
                            }
                        });
                    } else {
                        itemHtml = full_words[d]
                    }
                    let ScrabbleLetterScore = ScrabbleScore();
                    let points = 0;
                    full_words[d] = full_words[d].toLowerCase();
                    for (let i = 0; i < full_words[d].length; i++) {
                        points += ScrabbleLetterScore[full_words[d][i]] || 0; // for unknown characters
                    }

                    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 += 25;
        } else {
            document.getElementById(id).style.display = "none";
        }
    } catch (error) {
        console.error("Error fetching or processing data:", error);
    }
}

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 < 25) {
            tableFooter[i].style.display = "none";
        }
    }
}
function sortWords(data) {
    if (sortingFilter.selectedIndex == 0) {
        return data;
    } else if (sortingFilter.selectedIndex == 1) {
        return data.sort();
    } else if (sortingFilter.selectedIndex == 2) {
        return data.reverse();
    } else if (sortingFilter.selectedIndex == 3) {
        var tempArr = [];
        var newArray = [];
        data.map((item) => {
            let newWordsLength = 0;
            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;
        });

        newArray.map((ele) => {
            tempArr.push(ele.words);
        });

        return tempArr;
    }
}
// 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;
}