const getScript = document.currentScript
const letterLen = getScript.dataset.letter
const ablank = getScript.dataset.ablank

const siteUrl = getScript.dataset.url

let errorMsg = document.querySelector('.errorMsg')
let script = document.currentScript
let wordCount = document.querySelector('.wordCount')
let main = document.querySelector('.main')

const params = new URLSearchParams(window.location.search)
let serachValue = params.get('search').toLowerCase()
let prefixValue = params.get('prefix')
let containsValue = params.get('contains')
let suffixValue = params.get('suffix')
let exculdeValue = params.get('exculde')
let includeValue = params.get('include')
let lengthValue = params.get('length')
let dictonary = params.get('dictionary')



// Scrabble Point Counts
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
  }
}

let tab_link_wrapper = document.querySelector('.tab_link_wrapper')
tab_link_wrapper.style.display = "none"

let home_page_search_result = document.querySelector("#home_page_search_result")
let homePageSearchResult = `/result?search=${serachValue}&dictionary=Dictionary&prefix=&contains=&suffix=&exculde=&inculde=&length=`;

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


if (ablank) {
  if (!serachValue.includes("?")) {
    if (serachValue.length <= letterLen || serachValue.length >= letterLen) {
      serachValue = serachValue + '?'
      txtBox.value = serachValue
    }
  }
}






let letterCloseButton = document.querySelector('.letter-close-button-commonPage')
if (serachValue) {
  letterCloseButton.classList.add("ltr-cls-btn-commonPage")
}
letterCloseButton.addEventListener("click", () => {
  txtBox.value = ""
  letterCloseButton.classList.remove("ltr-cls-btn-commonPage")
})

txtBox.addEventListener('input', (e) => {
  if (e.target.value === "") {
    letterCloseButton.classList.remove("ltr-cls-btn-commonPage")
  } else {
    letterCloseButton.classList.add("ltr-cls-btn-commonPage")
  }
  let rangeOfBlankTile = script.dataset.range
  e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, '')
  if (rangeOfBlankTile === '') {
    rangeOfBlankTile = 3
  }
  e.target.value = e.target.value.replace(/ /g, '?')
  let data = []
  data = e.target.value.split('').filter((i) => i === '?')
  // console.log(data)
  if (data.length > rangeOfBlankTile) {
    e.target.value = e.target.value.replace(/\?$/, '')
  }
})

function mobileScrollTop(x) {
  if (x.matches) {
    txtBox.addEventListener("click", () => {
      document.documentElement.scrollTop = 350
      setTimeout(() => {
        document.documentElement.scrollTop = 350
      }, 150);
    })
  } else {
    console.log("false");
  }
}
var x = window.matchMedia("(max-width: 768px)")
// mobileScrollTop(x)
// x.addListener(mobileScrollTop)

var theSelect = document.getElementById('select_dropDown')
const sortup = document.querySelector(".sortup-icon")
let bool = false
sortup.addEventListener("click", () => {
  if (bool) {
    theSelect.size = 0
    bool = false
    theSelect.style.display = "none"
  }
  else {
    bool = true
    theSelect.size = 3
    theSelect.style.display = "block"
  }
})
document.querySelector('.select_dropDown2').value = dictonary
const getDiff = (text1, text2) => {
  var diffRange = []
  var currentRange = undefined
  for (var i = 0; i < text1.length; i++) {
    if (text1[i] != text2[i]) {
      if (currentRange == undefined) {
        currentRange = [i]
      }
    }
    if (currentRange != undefined && text1[i] == text2[i]) {
      currentRange.push(i)
      diffRange.push(currentRange)
      currentRange = undefined
    }
  }
  if (currentRange != undefined) {
    currentRange.push(i)
    diffRange.push(currentRange)
  }
  return diffRange
}
const getData = async (serachValue) => {
  try {
    console.log(true);
    // placeholder_loading.style.display = "none"
    errorMsg.innerHTML = ""
    wordCount.innerHTML = ""
    home_page_search_result.innerHTML = ""
    let selectedDictionary = document.querySelector('.select_dropDown2').value
    main.innerHTML = `<div class="loader">
    <img src='/assets/images/loading.gif'>
    <div style="font-weight:900;font-size:14px" >Finding words - Powered by ${siteUrl.replace(/^https?:\/\//, '')}</div>
    </div>`
    const response = await fetch(
      `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
    )
    const data = await response.json()
    main.innerHTML = ''
    x_with_letters(data)
  } catch (error) {
    console.log(error)
  }
}
// calling function
getData(serachValue.toLowerCase())

let quesMark = ''
quesMark = "?"


function logSubmit(event) {
  document.querySelector(".fillterWrapper").classList.add("hide")


  const scrollingElement = (document.scrollingElement || document.body);
  scrollingElement.scroll({ top: 0, behavior: 'smooth' });
  if (ablank) {
    if (!txtBox.value.includes("?")) {
      txtBox.value = txtBox.value + quesMark
    }
  }
  let selectedDictionary = document.querySelector('.select_dropDown2').value
  event.preventDefault();
  if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host +
      window.location.pathname + '?' + "search" + "=" + txtBox.value.toLowerCase() + '&' +
      'dictionary' + '=' + selectedDictionary +
      '&' + 'prefix' + '=' + startsWith.value + '&' + 'contains' + '=' + mustInclude.value +
      '&' + 'suffix' + '=' + endsWith.value + '&' + 'exculde' + '=' + exculdeWith.value +
      '&' + 'include' + '=' + inculdeWith.value + '&' + 'length' + '=' + wordLength.value;
    window.history.pushState({ path: newurl }, '', newurl);

    const params = new URLSearchParams(window.location.search)
    serachValue = params.get('search')
    prefixValue = params.get('prefix')
    containsValue = params.get('contains')
    suffixValue = params.get('suffix')
    exculdeValue = params.get('exculde')
    includeValue = params.get('include')
    lengthValue = params.get('length')
    dictonary = params.get('dictionary')

    gtag('event', 'page_view', {
      page_location: window.location.pathname + location.search,
    })
  }
  getData(txtBox.value.toLowerCase())
//   addFilterCount()

}

let selectedDictionary = document.querySelector('.select_dropDown2')
selectedDictionary.addEventListener("change", ((e) => {
  logSubmit(e)
}))


// applyBtn.addEventListener('submit', logSubmit)
form.addEventListener('submit', logSubmit);


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


    if (letterLen) {
      filterData = data.filter((item) => item.length == letterLen)
    }

    if (prefixValue) {
      filterData = filterData.filter((item2) =>
        item2.startsWith(prefixValue.toLowerCase())
      )
      startsWith.classList.add('tick')
      startsWith.value = prefixValue
    } else {
      startsWith.classList.remove('tick')
    }
    if (containsValue) {
      filterData = filterData.filter((item) =>
        item.includes(containsValue.toLowerCase())
      )
      mustInclude.classList.add('tick')
      mustInclude.value = containsValue
    } else {
      mustInclude.classList.remove('tick')
    }
    if (suffixValue) {
      filterData = filterData.filter((item) =>
        item.endsWith(suffixValue.toLowerCase())
      )
      endsWith.classList.add('tick')
      endsWith.value = suffixValue
    } else {
      endsWith.classList.remove('tick')
    }
    if (exculdeValue) {
      let data = []
      filterData.map((item) => {
        let check = false
        for (let e = 0; e < exculdeValue.length; e++) {
          const element = exculdeValue[e].toLowerCase()
          if (item.includes(element)) {
            check = true
            break
          } else {
            check = false
          }
        }
        if (check === false) {
          data.push(item)
        }
      })
      exculdeWith.classList.add('tick')
      exculdeWith.value = exculdeValue
      filterData = data
    } else {
      exculdeWith.classList.remove('tick')
    }

    if (includeValue) {
      let data = []
      filterData.map((item) => {
        let check = false
        for (let e = 0; e < includeValue.length; e++) {
          const element = includeValue[e].toLowerCase()
          if (!item.includes(element)) {
            check = true
            break
          } else {
            check = false
          }
        }
        if (check === false) {
          data.push(item)
        }
      })
      inculdeWith.classList.add('tick')
      inculdeWith.value = includeValue
      filterData = data
    } else {
      inculdeWith.classList.remove('tick')
    }

    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
        let ScrabbleLetterScore = ScrabbleScore()
        sum = 0
        item = item.toLowerCase()
        for (let i = 0; i < item.length; i++) {
          sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
        }
        wordLength.value = itemLength

        var text1 = serachValue.replace('?', '')
        var text2 = item
        var text3 = item
        function findIndex(str, char) {
          const strLength = str.length
          const indexes = []
          let newStr = str
          while (newStr && newStr.indexOf(char) > -1) {
            indexes.push(newStr.indexOf(char) + strLength - newStr.length)
            newStr = newStr.substring(newStr.indexOf(char) + 1)
            newStr = newStr.substring(newStr.indexOf(char) + 1)
          }
          return indexes
        }
        let chars = text1.split('')
        let indexs = []
        chars.map((i) => {
          let findIndexes = findIndex(text3, i)
          if (findIndexes.length > 0) {
            text3 = text3.split('')
            text3[findIndexes] = '$'
            text3 = text3.join('')
            indexs = [...indexs, ...findIndexes]
          }
        })
        let itemHtml = ''
        text2.split('').map((itemValue, index) => {
          let check = indexs.find((i) => i === index)
          if (check !== undefined) {
            itemHtml += `${itemValue}`
          } else {
            itemHtml += `<span class='highlight'>${itemValue}</span>`
          }
        })

        dataArr.push(item)
        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
        <li>${itemHtml}
          <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
            </li></a>`
      })

      // tab_container.innerHTML += `
      // <a href="#${itemLength}">
      // <input type="button" value="${itemLength} Letter" id="Tab${itemLength}" onclick="addFilter(${itemLength})"
      // class="tab_link">
      // </a>
      // `

      // let tabs = document.getElementsByClassName('tab_link')
      // tabs[0] ? tabs[0].classList.add('active-tab') : ''

      home_page_search_result.href = homePageSearchResult
      home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`


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

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

      sortValue = theSelect[theSelect.selectedIndex].text
      if (sortValue == 'Z-A') {
        sortby(sortBool, dataArr, itemLength)
      }
      if (sortValue == 'Points') {
        sortPointsby(sortBool, dataArr, itemLength)
      }


    }

    wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split(
      ''
    )}</strong>`
  }
}

//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 = exculdeValue
  filter_val[4].value = includeValue
  filter_val[5].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()

// sorting by points
function sortPointsby(sortValue, data, i) {
  if (sortValue) {
    main.innerHTML = ''
    let newArray = []
    data.map((item) => {
      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) => {
      var text1 = serachValue.replace('?', '')
      var text2 = item.words
      var text3 = item.words
      function findIndex(str, char) {
        const strLength = str.length
        const indexes = []
        let newStr = str
        while (newStr && newStr.indexOf(char) > -1) {
          indexes.push(newStr.indexOf(char) + strLength - newStr.length)
          newStr = newStr.substring(newStr.indexOf(char) + 1)
          newStr = newStr.substring(newStr.indexOf(char) + 1)
        }
        return indexes
      }
      let chars = text1.split('')
      let indexs = []
      chars.map((i) => {
        let findIndexes = findIndex(text3, i)
        if (findIndexes.length > 0) {
          text3 = text3.split('')
          text3[findIndexes] = '$'
          text3 = text3.join('')
          indexs = [...indexs, ...findIndexes]
        }
      })
      let itemHtml = ''
      text2.split('').map((itemValue, index) => {
        let check = indexs.find((i) => i === index)
        if (check !== undefined) {
          itemHtml += `${itemValue}`
        } else {
          itemHtml += `<span class='highlight'>${itemValue}</span>`
        }
      })
      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
      <li>${itemHtml}
    <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, i) {
  if (sortBool) {
    main.innerHTML = ''
    data.reverse()
    const result = data.map((item) => {
      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
      }

      var text1 = serachValue.replace('?', '')
      var text2 = item
      var text3 = item
      function findIndex(str, char) {
        const strLength = str.length
        const indexes = []
        let newStr = str
        while (newStr && newStr.indexOf(char) > -1) {
          indexes.push(newStr.indexOf(char) + strLength - newStr.length)
          newStr = newStr.substring(newStr.indexOf(char) + 1)
          newStr = newStr.substring(newStr.indexOf(char) + 1)
        }
        return indexes
      }
      let chars = text1.split('')
      let indexs = []
      chars.map((i) => {
        let findIndexes = findIndex(text3, i)
        if (findIndexes.length > 0) {
          text3 = text3.split('')
          text3[findIndexes] = '$'
          text3 = text3.join('')
          indexs = [...indexs, ...findIndexes]
        }
      })
      let itemHtml = ''
      text2.split('').map((itemValue, index) => {
        let check = indexs.find((i) => i === index)
        if (check !== undefined) {
          itemHtml += `${itemValue}`
        } else {
          itemHtml += `<span class='highlight'>${itemValue}</span>`
        }
      })

      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
            <li>${itemHtml}
        <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()
    const result = data.map((item) => {
      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
      }

      var text1 = serachValue.replace('?', '')
      var text2 = item
      var text3 = item
      function findIndex(str, char) {
        const strLength = str.length
        const indexes = []
        let newStr = str
        while (newStr && newStr.indexOf(char) > -1) {
          indexes.push(newStr.indexOf(char) + strLength - newStr.length)
          newStr = newStr.substring(newStr.indexOf(char) + 1)
          newStr = newStr.substring(newStr.indexOf(char) + 1)
        }
        return indexes
      }
      let chars = text1.split('')
      let indexs = []
      chars.map((i) => {
        let findIndexes = findIndex(text3, i)
        if (findIndexes.length > 0) {
          text3 = text3.split('')
          text3[findIndexes] = '$'
          text3 = text3.join('')
          indexs = [...indexs, ...findIndexes]
        }
      })
      let itemHtml = ''
      text2.split('').map((itemValue, index) => {
        let check = indexs.find((i) => i === index)
        if (check !== undefined) {
          itemHtml += `${itemValue}`
        } else {
          itemHtml += `<span class='highlight'>${itemValue}</span>`
        }
      })

      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
              <li>${itemHtml}
          <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>
       
          `
  }
}

// Implement Active class
// const addFilter = () => {
//   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
//   // console.log(activeLetter)
//   activeLetter.classList.add('active-tab')
// }