let main = document.querySelector('.main')
let tab_container = document.querySelector('.tab_container')

var sortValue
var sortBool = false

var theSelect = document.getElementById('select_dropDown')

let tabs = document.getElementsByClassName('tab_link')
tabs[0] ? tabs[0].classList.add('active-tab') : ''
// handling of filter on scroll
window.onscroll = function () {
  var section = document.querySelectorAll('.allGroupWords')
  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 filterLinks(id) {
  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('.wordlistContainer')
  var sort_val = document.querySelector('.sort-select').value
  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
}

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

const fillterWrapper = document.querySelector('.fillterWrapper')
function myFunction() {
  fillterWrapper.classList.toggle('hide')
}
const close = document.querySelector('.times')
close.addEventListener('click', () => {
  fillterWrapper.classList.add('hide')
})



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