const getScript = document.querySelector(".serachSection")
const letterLen = getScript.dataset.letter
const ablank = getScript.dataset.ablank
const siteUrl = getScript.dataset.url
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('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 = `/?search=${serachValue}&dictionary=Dictionary&prefix=&contains=&suffix=&exculde=&inculde=&length=`;

txtBox.value = serachValue


if (ablank) {
    if (!serachValue.includes("?")) {
        if (serachValue.length <= letterLen || serachValue.length >= letterLen) {
            serachValue = serachValue + '?'
            txtBox.value = serachValue
        }
    }
}
// const filterInputs = document.querySelectorAll('.filter_val');
// Array.from(filterInputs).forEach((item) => {
//     item.addEventListener("input", (e) => {
//         const inputValue = e.target.value;
//         const parentElement = e.target.parentElement;
//         const imgElement = parentElement.querySelector('img');
//         const tooltipElement = parentElement.querySelector('.filter-tooltip');

//         if (inputValue == "") {
//             imgElement.src = "/assets/images/questionmark.svg"
//             item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
//             tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
//             tooltipElement.style.setProperty('--tooltip-border-style', 'soild');

//         } else {
//             item.nextElementSibling.removeAttribute("data-tip")
//             imgElement.src = "/assets/images/close-btn.svg"
//             tooltipElement.style.setProperty('--tooltip-padding', '0');
//             tooltipElement.style.setProperty('--tooltip-border-style', 'none');
//         }
//         item.nextElementSibling.addEventListener("click", () => {
//             e.target.value = ""
//             imgElement.src = "/assets/images/questionmark.svg"
//             item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
//             tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
//             tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
//         })
//     })
// })
// function handleFilterInput(e) {
//     const inputValue = e.target.value;
//     const parentElement = e.target.parentElement;
//     const imgElement = parentElement.querySelector('img');
//     const tooltipElement = parentElement.querySelector('.filter-tooltip');

//     if (inputValue == "") {
//         imgElement.src = "/assets/images/questionmark.svg"
//         e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
//         tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
//         tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
//     } else {
//         e.target.nextElementSibling.removeAttribute("data-tip")
//         imgElement.src = "/assets/images/close-btn.svg"
//         tooltipElement.style.setProperty('--tooltip-padding', '0');
//         tooltipElement.style.setProperty('--tooltip-border-style', 'none');
//     }

//     e.target.nextElementSibling.addEventListener("click", () => {
//         e.target.value = ""
//         imgElement.src = "/assets/images/questionmark.svg"
//         e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
//         tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
//         tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
//     });
// }
// document.addEventListener("DOMContentLoaded", () => {
//   const filterInputs = document.querySelectorAll('.filter_val');
//     Array.from(filterInputs).forEach((item) => {
//         // Call the function on load
//         handleFilterInput({ target: item });
//         item.addEventListener("input", handleFilterInput);
//     });
// });
// let letterCloseButton = document.querySelector('.letter-close-button-commonPage')
if (serachValue) {
    letterCloseButton.style.display = "block"
}
// 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 {
        errorMsg.innerHTML = ""
        wordCount.innerHTML = ""
        home_page_search_result.innerHTML = ""
        let selectedDictionary = document.querySelector('.select_dropDown2').value
        main.innerHTML = `<main class="placeholder-loader">
        <ul class="o-vertical-spacing o-vertical-spacing--l">
          <li class="blog-post o-media">
            <div class="o-media__body">
              <div class="o-vertical-spacing">
                <p class="m-0">
                  <span class="skeleton-box" style="width:40%;"></span>
                </p>
              </div>
            </div>
          </li>
          <li class="blog-post o-media">
            <div class="o-media__figure">
              <span class="skeleton-box" style="width:800px;height:140px;"></span>
            </div>
          </li>
          <li class="blog-post o-media">
            <div class="o-media__figure">
              <span class="skeleton-box" style="width:800px;height:140px;"></span>
            </div>
          </li>
          <li class="blog-post o-media">
          <div class="o-media__figure">
            <span class="skeleton-box" style="width:800px;height:140px;"></span>
          </div>
        </li>
        </ul>
      </main>`;
        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) {
    document.querySelector(".sortingFilters").style.display="flex"
    main.innerHTML = ""
    if (typeof data === 'string') {
        document.querySelector(".sortingFilters").style.display="none"
        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.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
            startsWith.classList.add('tick')
            startsWith.value = prefixValue
        } else {
            startsWith.classList.remove('tick')
        }
        if (containsValue) {
            filterData = filterData.filter((item) =>
                item.includes(containsValue.toLowerCase())
            )
            mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
            mustInclude.classList.add('tick')
            mustInclude.value = containsValue
        } else {
            mustInclude.classList.remove('tick')
        }
        if (suffixValue) {
            filterData = filterData.filter((item) =>
                item.endsWith(suffixValue.toLowerCase())
            )
            endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
            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.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
            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.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
            inculdeWith.classList.add('tick')
            inculdeWith.value = includeValue
            filterData = data
        } else {
            inculdeWith.classList.remove('tick')
        }

        if (letterLen) {
            wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
        }

        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>`
            })
            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')
// }