/***************
 SCRABBLER_JS
***************/
const getScript = document.currentScript
let form = document.querySelector('#form')
let wordCount = document.querySelector('.wordCount')
let main = document.querySelector('.main')
let loader = document.querySelector(".main-loader")
let errorMsg = document.querySelector('.errorMsg')
let script = document.currentScript

// getqueryUrl from form
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')

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

let ok = true

let tab_container = document.querySelector('.tab_container')
const siteUrl = getScript.dataset.url
var sortValue
var sortBool = false

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")
})
let txtBox = document.querySelector('.txtBox')
txtBox.focus()
txtBox.value = serachValue
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 === '?')
    if (data.length > rangeOfBlankTile) {
        e.target.value = e.target.value.replace(/\?$/, '')
    }
})
let rangeOfBlankTile = script.dataset.range
let quesMark = "?"
if (rangeOfBlankTile) {
    if (!serachValue.includes("?")) {
        serachValue = serachValue + quesMark.repeat(rangeOfBlankTile); //
        txtBox.value = serachValue
    }
}

let 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
}
// getWords define...
let stringLength = null
let blank = []
const getData = async (serachValue) => {
    try {
        errorMsg.innerHTML = ""
        wordCount.innerHTML = ""
        let selectedDictionary = document.querySelector('.select_dropDown2').value
        loader.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>`
        /// loader
        const response = await fetch(
            `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
        )
        const data = await response.json()

        function longestString(...strs) {
            return strs.sort(function (a, b) { return b.length - a.length })[0];
        }

        stringLength = longestString(...data)

        loader.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())
    function logSubmit(event) {
        if (rangeOfBlankTile) {
            if (!txtBox.value.includes("?")) {
                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
            }
        }

        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 getWords(data) {
    // main.innerHTML = ""
    tab_container.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
        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)
            }
        })
        let inc = 0
        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
            } else {
                startsWith.classList.remove('tick')
            }
            if (containsValue) {
                newdata = newdata.filter((item) =>
                    item.includes(containsValue.toLowerCase())
                )
                mustInclude.classList.add('tick')
                mustInclude.value = containsValue
            }
            else {
                mustInclude.classList.remove('tick')
            }
            if (suffixValue) {
                newdata = newdata.filter((item) =>
                    item.endsWith(suffixValue.toLowerCase())
                )
                endsWith.classList.add('tick')
                endsWith.value = suffixValue
            } else {
                endsWith.classList.remove('tick')
            }
            if (exculdeValue) {
                let data = []
                newdata.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
                newdata = data
            } else {
                exculdeWith.classList.remove('tick')
            }
            if (includeValue) {
                let data = []
                newdata.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
                newdata = data
            } else {
                inculdeWith.classList.remove('tick')
            }
            if (lengthValue) {
                newdata = newdata.filter((item) => item.length == lengthValue)
                wordLength.classList.add('tick')
                wordLength.value = lengthValue
            } else {
                wordLength.classList.remove('tick')
            }

            if (newdata.length === 0) {
                main.innerHTML += ''
            } else {
                newWordsLength += newdata.length
                const result = newdata.map((item) => {
                    var text1 = serachValue.replace('?', '')
                    var text2 = item
                    var text3 = item
                    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>`
                        }
                    })

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



                if (result[0] !== undefined) {


                    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') : ''

                    let allGroupWords = document.getElementById(`alpha_${i}`)
                    let getAllGroupWords = [...main.getElementsByClassName('allGroupWords')]


                    if (main.dataset.value !== "null") {
                        if (allGroupWords) {
                            Array.from(getAllGroupWords).forEach((item) => {
                                if (item.id.slice(6) <= stringLength.length) {
                                    if (item.nextSibling !== null && item.nextSibling.classList !== undefined && item.nextSibling.classList.contains("mmtwrappos")) {
                                        item.nextSibling.style.display = "block"
                                    }
                                    allGroupWords.innerHTML = ""
                                    item.style.display = "block"
                                }
                                else {
                                    if (item.nextSibling !== null && item.nextSibling.classList !== undefined && item.nextSibling.classList.contains("mmtwrappos")) {
                                        item.nextSibling.style.display = "none"
                                    }
                                    item.style.display = "none"
                                }
                            })
                            allGroupWords.innerHTML = `
              <div class="wordListHeading">
                <h3 class="lead">${i} Letter Words</h3>
              </div>
              <div class="wordList">
                <ul class="ul list-unstyled">
                  ${result.join('')}
                </ul>
              </div>
             `
                        }
                        else {
                            let getAllGroupWords = [...main.getElementsByClassName('allGroupWords')]
                            let allGroupWords = document.createElement("div")
                            allGroupWords.className = "allGroupWords wordlistContainer"
                            allGroupWords.id = `alpha_${i}`
                            allGroupWords.innerHTML = `
                <div class="wordListHeading">
                  <h3 class="lead">${i} Letter Words</h3>
                </div>
                <div class="wordList">
                  <ul class="ul list-unstyled">
                    ${result.join('')}
                  </ul>
                </div>
              `
                            blank.push(allGroupWords)
                            let newCreated = stringLength.length - getAllGroupWords.length - 1
                            inc = inc + 1
                            if (inc === newCreated) {
                                Array.from(blank).reverse().map((item) => {
                                    main.prepend(item)
                                })
                            }
                        }
                    }
                    else {
                        if (i === 2) {
                            main.dataset.value = "not_null"
                        }
                        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> Found ${newWordsLength} words with letters with ${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) => {
                    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> `
                })

                let allGroupWords = document.getElementById(`alpha_${i}`)
                if (allGroupWords) {
                    allGroupWords.innerHTML = `
          <div class="wordListHeading">
            <h3 class="lead">${i} Letter Words</h3>
          </div>
          <div class="wordList">
            <ul class="ul list-unstyled">
              ${result.join('')}
            </ul>
          </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) => {
                    var text1 = serachValue.replace('?', '')
                    var text2 = item
                    var text3 = item
                    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>`
                        }
                    })
                    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 ${item} in Dictionary" target ="_blank" href="/word-meaning?search=${item.toLowerCase()}" >
            <li>${itemHtml}
              <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px">${sum}</span>
            </li></a> `
                    }
                })
                let allGroupWords = document.getElementById(`alpha_${i}`)
                if (allGroupWords) {
                    allGroupWords.innerHTML = `
          <div class="wordListHeading">
            <h3 class="lead">${i} Letter Words</h3>
          </div>
          <div class="wordList">
            <ul class="ul list-unstyled">
              ${result.join('')}
            </ul>
          </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) => {
                    var text1 = serachValue.replace('?', '')
                    var text2 = item
                    var text3 = item
                    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>`
                        }
                    })
                    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 ${item} in Dictionary" target = "_blank" href="/word-meaning?search=${item.toLowerCase()}" >
            <li>${itemHtml}
              <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px">${sum}</span>
            </li></a> `
                    }
                })
                let allGroupWords = document.getElementById(`alpha_${i}`)
                if (allGroupWords) {
                    allGroupWords.innerHTML = `
          <div class="wordListHeading">
            <h3 class="lead">${i} Letter Words</h3>
          </div>
          <div class="wordList">
            <ul class="ul list-unstyled">
              ${result.join('')}
            </ul>
          </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 = exculdeValue
    filter_val[4].value = includeValue
    filter_val[5].value = lengthValue

    for (var i = 0; i <= 5; 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({ block: 'nearest' })
        }
    }
}

// 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.documentElement.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
}
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) + 5)
        newStr = newStr.substring(newStr.indexOf(char) + 5)
    }

    return indexes
}