const getScript = document.querySelector(".serachSection")
const letterLen = getScript.dataset.letter
const ablank = getScript.dataset.ablank
const siteUrl = getScript.dataset.url
let errorMsg = document.querySelector('.errorMsg')
let wordCount = document.querySelector('.wordCount')
let main = document.querySelector('.main')

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('exculde')
let includeValue = params.get('include')
let lengthValue = params.get('length')
let dictonary = params.get('dictionary')

let sortingFilter = document.querySelector("#select_dropDown");

// Scrabble Point Counts
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
    }
}

let tab_link_wrapper = document.querySelector('.tab_link_wrapper')
tab_link_wrapper.style.display = "none"

let home_page_search_result = document.querySelector("#home_page_search_result")
let homePageSearchResult = `/?search=${serachValue}&dictionary=Dictionary&prefix=&contains=&suffix=&exculde=&inculde=&length=`;

txtBox.value = serachValue
if (ablank) {
    if (!serachValue.includes("?")) {
        if (serachValue.length <= letterLen || serachValue.length >= letterLen) {
            serachValue = serachValue + '?'
            txtBox.value = serachValue
        }
    }
}
if (serachValue) {
    letterCloseButton.style.display = "block"
}
var 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
}
let featureContainer = document.querySelector("#featureContainer")
let howContainer = document.querySelector("#howContainer")
let faqsContainer = document.querySelector("#faqsContainer")
let infographicsContainer = document.querySelector("#infographicsContainer")
let authorsLists = document.querySelector(".authors-list")

const getData = async (serachValue) => {
    try {
        document.querySelector(".main-header").style.background = "#fff"
        document.querySelector(".heading-h2").style.display = "none"
        errorMsg.innerHTML = ""
        wordCount.innerHTML = ""
        if (featureContainer) {
            featureContainer.remove()
        }
        if (howContainer) {
            howContainer.remove()
        }
        if (faqsContainer) {
            faqsContainer.remove()
        }
        if (infographicsContainer) {
            infographicsContainer.remove()
        }
        if (authorsLists) {
            authorsLists.remove()
        }
        home_page_search_result.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:800px;height:140px;"></span>
            </div>
          </li>
          <li class="blog-post o-media">
            <div class="o-media__figure">
              <span class="skeleton-box" style="width:800px;height:140px;"></span>
            </div>
          </li>
          <li class="blog-post o-media">
          <div class="o-media__figure">
            <span class="skeleton-box" style="width:800px;height:140px;"></span>
          </div>
        </li>
        </ul>
      </main>`;
        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 = ''
        x_with_letters(data)
    } catch (error) {
        console.log(error)
    }
}
// calling function
getData(serachValue.toLowerCase())

let quesMark = ''
quesMark = "?"

function logSubmit(event) {
    document.querySelector(".fillterWrapper").classList.add("hide")


    const scrollingElement = (document.scrollingElement || document.body);
    scrollingElement.scroll({ top: 0, behavior: 'smooth' });
    if (ablank) {
        if (!txtBox.value.includes("?")) {
            txtBox.value = txtBox.value + quesMark
        }
    }
    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 + '&' + 'exculde' + '=' + 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('exculde')
        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 moreData = []
let data_index = 25;
function x_with_letters(data) {
    data_index = 25
    moreData = []
    document.querySelector(".sortingFilters").style.display = "flex"
    main.innerHTML = ""
    if (typeof data === 'string') {
        document.querySelector(".sortingFilters").style.display = "none"
        errorMsg.innerHTML = 'No words found'
        wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
            ''
        )}</strong>`
    } else {
        let newWordsLength = 0
        let filterData = ''
        let dataArr = []


        if (letterLen) {
            filterData = data.filter((item) => item.length == letterLen)
        }

        if (prefixValue) {
            filterData = filterData.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) {
            filterData = filterData.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) {
            filterData = filterData.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 = []
            filterData.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
            filterData = data
        } else {
            exculdeWith.classList.remove('tick')
        }

        if (includeValue) {
            let data = []
            filterData.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
            filterData = data
        } else {
            inculdeWith.classList.remove('tick')
        }

        if (letterLen) {
            wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
        }

        if (filterData.length === 0) {
            main.innerHTML += ''
            errorMsg.innerHTML = 'No words Found with this length'
        } else {
            newWordsLength += filterData.length
            filterData = sortWords(filterData);
            moreData.push(filterData)
            let itemLength = ''
            let result = filterData.map((item) => {
                let itemHtml = "";
                itemLength = item.length
                let ScrabbleLetterScore = ScrabbleScore()
                sum = 0
                item = item.toLowerCase()
                for (let i = 0; i < item.length; i++) {
                    sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
                }
                wordLength.value = itemLength
                if (serachValue) {
                    var text1 = serachValue.replace('?', '')
                    var text2 = item
                    var text3 = item
                    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]
                        }
                    })

                    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
                }

                dataArr.push(item)
                return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
        ${itemHtml}
          <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </a>`
            })
            home_page_search_result.href = homePageSearchResult
            home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`

            result = result.slice(0, 25)

            main.innerHTML += `
            <div class="allGroupWords" id="alpha_${itemLength}">
                    <h3 class="wordListHeading lead">${itemLength} 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="${itemLength}">More Words</button>
                </div>
            </div>
            `;
            showMoreLimit()
        }
        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;

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

        console.log(data_index);

        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 {
            data_index = 25
            document.getElementById(id).style.display = "none";
        }
    } catch (error) {
        console.error("Error fetching or processing data:", error);
    }
}
function showMoreLimit() {
    let tableFooter = document.querySelector(".btn-container");
    let wordList = document.querySelector(".wordList");
    let final_data = wordList.getElementsByClassName("anchor__style");
    if (final_data.length < 25) {
        tableFooter.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;
    }
}


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