/***************

SCRABBLER_JS

***************/

// grab some html elements 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') let prefixValue = params.get('prefix') let containsValue = params.get('contains') let suffixValue = params.get('suffix') let lengthValue = params.get('length') let dictonary = params.get('dictionary')

// advanced filter element grabs let tick let startsWith = document.getElementById('startsWith') let mustInclude = document.getElementById('mustInclude') let endsWith = document.getElementById('endsWith') let wordLength = document.getElementById('wordLength')

let ok = true

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

var sortValue var sortBool = false

let txtBox = document.querySelector('.txtBox') txtBox.value = serachValue

var theSelect = document.getElementById('select_dropDown') document.querySelector('.select_dropDown2').value = dictonary

// getWords define… const getData = async (serachValue) => {

try {
  main.innerHTML = `<div class="loader">
  <img src='/assets/images/loading.gif'>
  </div>`
  /// loader
  const response = await fetch(
    `/.netlify/functions/getWords?name=${serachValue}`
  )
  const data = await response.json()
  main.innerHTML = ''
  getWords(data)
  //getWords calling...
} catch (error) {
  console.log(error)
}

} //getData calling… if (lengthValue === '1') {

errorMsg.innerHTML = 'words length should be more than 1'

} else {

getData(serachValue.toLowerCase())

}

// getWords function define… function getWords(data) {

if (typeof data === 'string') {
  errorMsg.innerHTML = 'no words found'
  wordCount.innerHTML = `<strong> 0 words with letters ${serachValue.split(
    ''
  )}</strong>`
} else {
  let newWordsLength = 0

  // sort eventlistener
  theSelect.addEventListener('change', () => {
    sortValue = theSelect[theSelect.selectedIndex].text
    if (sortValue == 'Z-A') {
      sortBool = true
      sortby(sortBool, data)
    } else {
      sortBool = false
      sortby(sortBool, data)
    }
    if (sortValue == 'Points') {
      sortBool = true
      sortPointsby(sortBool, data)
    }
  })

  for (let i = serachValue.length; i >= 1; i--) {
    let newdata = data.filter((item) => item.length === i)

    if (prefixValue) {
      newdata = newdata.filter((item2) =>
        item2.startsWith(prefixValue.toLowerCase())
      )
      startsWith.classList.add('tick')
      startsWith.value = prefixValue
    }

    if (containsValue) {
      newdata = newdata.filter((item) =>
        item.includes(containsValue.toLowerCase())
      )
      mustInclude.classList.add('tick')
      mustInclude.value = containsValue
    }
    if (suffixValue) {
      newdata = newdata.filter((item) =>
        item.endsWith(suffixValue.toLowerCase())
      )
      endsWith.classList.add('tick')
      endsWith.value = suffixValue
    }
    if (lengthValue) {
      newdata = newdata.filter((item) => item.length == lengthValue)
      wordLength.classList.add('tick')
      wordLength.value = lengthValue
    }

    if (newdata.length === 0) {
      main.innerHTML += ''
    } else {
      newWordsLength += newdata.length

      const result = newdata.map((item) => {
        if (item.length === 1) {
          ok = false
          newWordsLength = newWordsLength - 1
        } else {
          let ScrabbleLetterScore = ScrabbleScore()
          sum = 0
          item = item.toLowerCase()
          for (let i = 0; i < item.length; i++) {
            sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
          }
          return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
          <li>${item}
        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
          </li></a>`
        }
      })

      if (ok) {
        tab_container.innerHTML += `
        <input type="button" id="Tab_${i}" onclick="Filtering(${i})" value="${i} Letter"
        class="tab_link  cursorPointer" />
        `
        let tabs = document.getElementsByClassName('tab_link')
        tabs[0] ? tabs[0].classList.add('active-tab') : ''

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

  if (newWordsLength === 0) {
    errorMsg.innerHTML = 'no words found'
  } else {
    wordCount.innerHTML = `<strong>${newWordsLength} words with letters ${serachValue.split(
      ''
    )}</strong>`
  }
}

}

// sorting by points function sortPointsby(sortValue, data) {

main.innerHTML = ''
if (sortValue) {
  let newWordsLength = 0
  for (let i = serachValue.length; i >= 1; i--) {
    var newdata = data.filter((item) => item.length === i)

    if (newdata.length === 0) {
      main.innerHTML += ''
    } else {
      newWordsLength += newdata.length
      var newArray = []
      newdata.map((item) => {
        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
      })

      const result = newArray.map((item) => {
        return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
        <li>${item.words}
      <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.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>
      `
    }
  }
}

}

// sort by aplhabets function sortby(sortBool, data) {

if (sortBool) {
  main.innerHTML = ''
  data.reverse()
  let newWordsLength = 0
  for (let i = serachValue.length; i >= 1; i--) {
    var newdata = data.filter((item) => item.length === i)

    if (newdata.length === 0) {
      main.innerHTML += ''
    } else {
      newWordsLength += newdata.length

      const result = newdata.map((item) => {
        if (item.length === 1) {
          ok = false
          newWordsLength = newWordsLength - 1
        } else {
          let ScrabbleLetterScore = ScrabbleScore()
          let sum = 0
          item = item.toLowerCase()
          for (let i = 0; i < item.length; i++) {
            sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
          }

          return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
          <li>${item}
      <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</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>
      `
    }
  }
} else {
  main.innerHTML = ''
  data.sort()
  for (let i = serachValue.length; i >= 1; i--) {
    var newdata = data.filter((item) => item.length === i)
    if (newdata.length === 0) {
      main.innerHTML += ''
    } else {
      const result = newdata.map((item) => {
        if (item.length === 1) {
          ok = false
        } else {
          let ScrabbleLetterScore = ScrabbleScore()
          let sum = 0
          item = item.toLowerCase()
          for (let i = 0; i < item.length; i++) {
            sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
          }

          return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
          <li>${item}
      <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</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
}

}

//Handling of filter counter in advanced filter function addFilterCount() {

let filter_val = document.getElementsByClassName('filter_val')
let filter = document.querySelector('.filter_count')
let filter_count = 0

filter_val[0].value = prefixValue
filter_val[1].value = containsValue
filter_val[2].value = suffixValue
filter_val[3].value = lengthValue

for (var i = 0; i < 4; i++) {
  if (filter_val[i].value != '') {
    filter_count += 1
  }
  if (filter_count === 0) {
    filter.style.display = 'none'
  } else {
    filter.style.display = 'inline-block'
  }

  filter.innerHTML = filter_count
}

} addFilterCount()

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

}

// Add Filtering let sections = {} function Filtering(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

}