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('serach')
let prefixValue = params.get('prefix')
let containsValue = params.get('contains')
let suffixValue = params.get('suffix')
let lengthValue = params.get('length')

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

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

    if (
      window.location.pathname ==
      '/thirteen-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 13)
    } else if (
      window.location.pathname ==
      '/twelve-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 12)
    } else if (
      window.location.pathname ==
      '/eleven-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 11)
    } else if (
      window.location.pathname == '/ten-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 10)
    } else if (
      window.location.pathname == '/nine-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 9)
    } else if (
      window.location.pathname ==
      '/eight-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 8)
    } else if (
      window.location.pathname ==
      '/seven-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 7)
    } else if (
      window.location.pathname == '/six-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 6)
    } else if (
      window.location.pathname == '/five-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 5)
    } else if (
      window.location.pathname == '/four-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 4)
    } else if (
      window.location.pathname ==
      '/three-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 3)
    } else if (
      window.location.pathname == '/two-letter-words-with-these-letters/result'
    ) {
      filterData = data.filter((item) => item.length == 2)
    }

    if (filterData.length === 0) {
      main.innerHTML += ''
      errorMsg.innerHTML = 'No words Found with this length'
    } else {
      newWordsLength += filterData.length
      let itemLength = ''
      const result = filterData.map((item) => {
        itemLength = item.length
        return ` <li><a>${item}</a></li>`
      })

      main.innerHTML += `
        <div class="allGroupWords">
          <div class="wordListHeading">
          <h3 class="lead">${itemLength} Letter Words</h3>
           </div>
      <div class="wordList">
          <ul class="ul list-unstyled">
           ${result.join('')}
          </ul>
      </div>
  </div>
  `
    }
    wordCount.innerHTML = `<strong>${newWordsLength} words with letters ${serachValue.split(
      ''
    )}</strong>`
  }
}