let main = document.querySelector('.main')
let tab_container = document.querySelector('.tab_container')
var sortValue
var sortBool = false
var theSelect = document.getElementById('select_dropDown')
let lengthSelect = document.querySelector(".length-select");

// Add Filtering
let sections = {}
function Filtering(id) {
    id = lengthSelect.value
    main.innerHTML += ``
    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
        }
    })
    console.log(sort_val + '_' + id);
    document.documentElement.scrollTop = sections[sort_val + '_' + id] + 5
}



// sorting for words
theSelect.addEventListener("change", () => {
    sortValue = theSelect[theSelect.selectedIndex].text;
    let list_word = document.getElementsByClassName("list_word")
    let data = []
    Array.from(list_word).forEach(item => {
        item.removeChild(item.lastElementChild);
        data.push(item.innerHTML.replace(/\s/g, ''))
    })
    if (sortValue == "Z-A") {
        sortBool = "Z-A";
        sortby(sortBool, data);
    } else if (sortValue == "Points") {
        sortBool = "Points";
        sortPointsby(sortBool, data);
    } else {
        sortBool = "A-Z";
        sortby(sortBool, data);
    }
});

// sort by aplhabets
function sortby(sortValue, data) {
    if (sortValue === "Z-A") {
        appendData(sortValue, data.reverse())
    }
    else if (sortValue === "A-Z") {
        appendData(sortValue, data.sort())
    }
}
// sorting by points
function sortPointsby(sortValue, data) {
    if (sortValue === "Points") {
        let newArray = [];
        data.map((item) => {
            if (item.length === 1) {
                ok = false;
            } else {
                let ScrabbleLetterScore = ScrabbleScore();
                let points = 0;
                let word = item.replace(/<\/?[^>]+>/gi, '')
                for (let i = 0; i < word.length; i++) {
                    points += ScrabbleLetterScore[word[i]] || 0;
                }
                const value = {
                    words: item,
                    points: points,
                };
                newArray.push(value);
            }
        });
        newArray.sort(function (a, b) {
            return b.points - a.points;
        });
        appendData(sortValue, newArray)
    }
}

function appendData(sortValue, data) {
    main.innerHTML = "";
    let newWordsLength = 0;
    for (let i = 15; i > 0; i--) {
        let newdata
        if (sortValue === "Points") {
            newdata = data.filter((item) => item.words.replace(/<\/?[^>]+>/gi, '').length === i)
        } else {
            newdata = data.filter((item) => item.replace(/<\/?[^>]+>/gi, '').length === i)
        }
        if (newdata.length === 0) {
            main.innerHTML += "";
        } else {
            newWordsLength += newdata.length;
            const result = newdata.map((item) => {
                let ScrabbleLetterScore = ScrabbleScore();
                let points = 0;
                let word
                if (sortValue === "Points") {
                    word = item.words.replace(/<\/?[^>]+>/gi, '')
                    item = item.words
                } else {
                    word = item.replace(/<\/?[^>]+>/gi, '')
                }
                for (let i = 0; i < word.length; i++) {
                    points += ScrabbleLetterScore[word[i]] || 0; // for unknown characters
                }
                return `
        <a class="anchor__style" title="Lookup ${item.replace(/<\/?[^>]+>/gi, '')} in Dictionary" target="_blank"
        href="/word-meaning?search=${item.replace(/<\/?[^>]+>/gi, '')}">
        <li class="list_word">
        ${item}
        <span class="points" value="${points}" style="position:relative; top:4px; font-size:12px">${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>
      `
        }
    }
}
// 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;
    // }
};