/***************
 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;


// const serachSection = document.querySelector(".serachSection")
const letterLen = serachSection.dataset.letter
const ablank = serachSection.dataset.ablank

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


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")
let serachBtn = document.querySelector(".serachBtn")
let searchBtnContainer = document.querySelector(".search-btn-container")
let home_page_search_result
let homePageSearchResult

// getWords define...
const worker = new Worker('/assets/js/wordfinder-worker.js');
const getData = async (serachValue) => {
    try {

        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.height = "auto"
        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;
        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>`;

        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(event.data.data);
        }
    } catch (error) {
        console.log(error);
    }
};
//getData calling...
if (lengthValue === "1") {
    errorMsg.innerHTML = "words length should be more than 1";
} else {
    function logSubmit(event) {
        document.querySelector(".fillterWrapper").classList.add("hide")
        const scrollingElement = document.scrollingElement || document.body;
        scrollingElement.scroll({ top: 0, behavior: "smooth" });
        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());
    }
    let selectedDictionary = document.querySelector(".select_dropDown2");
    selectedDictionary.addEventListener("change", (e) => {
        logSubmit(e);
    });
    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 = ""
    if (typeof data === "string") {
        errorMsg.innerHTML = "no words found";
    } else {
        worker.postMessage({
            type: 'filterwords',
            data: data,
            serachValue: serachValue,
            prefixValue: prefixValue,
            containsValue: containsValue,
            suffixValue: suffixValue,
            exculdeValue: exculdeValue,
            includeValue: includeValue,
            lengthValue: lengthValue,
            sortingFilter: sortingFilter.selectedIndex,
            dictonary: dictonary
        });
        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 = prefixValue;
                }
                if (suffixValue) {
                    endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    endsWith.classList.add("tick");
                    endsWith.value = suffixValue;
                }
                if (containsValue) {
                    mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    mustInclude.classList.add("tick");
                    mustInclude.value = containsValue;
                }
                if (lengthValue) {
                    wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    wordLength.classList.add("tick");
                    wordLength.value = lengthValue;
                }
                if (exculdeValue) {
                    exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    exculdeWith.classList.add("tick");
                    exculdeWith.value = exculdeValue;
                }
                if (includeValue) {
                    inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                    inculdeWith.classList.add("tick");
                    inculdeWith.value = includeValue;
                }
                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("")}`
                        }


                        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)];;
    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
            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;
            }
        }
        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);
    }
}


// Scrabble Point Array
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 < 25) {
            tableFooter[i].style.display = "none";
        }
    }
}


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