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 ? tabs.classList.add('active-tab') : '' // handling of filter on scroll window.onscroll = function () {

var section = document.querySelectorAll('.allGroupWords')
console.log(section)
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()
  }
}

}

// 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.body.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')

})